Create Pinterest-like Boards With Pure CSS

Boardz.css is a simple CSS library that allows creating Pinterest-like boards from simple unordered lists with a file size of less than 1KB.

Boardz is a simple, lightweight, and responsive pure CSS library that creates Pinterest-like boards from simple, unordered list elements. The main goal of Boardz is to give the basic design of the board a simple virtual layout. The library is not built to be a plug-and-use file, it simply gives the board layout for the nested <ul> and <li> elements. Uses a powerful Flexbox model to create and maintain layout across devices and screens.

pinterest like responsive grid, masonry dynamic grid layout, responsive masonry grid, pinterest layout css, pinterest layout js, dynamic grid layout in html, pinterest masonry

Responsive And Lightweight Masonry Grid jQuery Plugin

How to make use of it:

1. Download the CSS file and place boardz.css in the header of the HTML document.

<link rel="stylesheet" href="src/boardz.css">

2. Create a list of boards and insert them into a DIV container named “.boardz”.

<div class="boardz">
  <ul>
      <li>
          <h1> Board 1</h1>
          Content
      </li>
      <li>
          <h1> Board 2</h1>
          Content
      </li>
  </ul>
  <!-- Second column -->
  <ul>
      <li>
          <h1> Board 3</h1>
          Content
      </li>
      <li>
          <h1> Board 4</h1>
          Content
      </li>
  </ul>
</div>

3. To create a “fit” board layout, just by adding the fitted class to the div of the Boardz element.

<div class="boardz fitted">
  ...
</div>

4. Boardz can be used with images as well.

<div class="boardz centered-block">
  <ul>
      <li>
          <img src=" " alt="demo image"/>
      </li>
      <li>
          <img src=" " alt="demo image"/>
      </li>
      <li>
          <img src=" " alt="demo image"/>
      </li>                    
  </ul>
  <ul>
      <li>
          <img src=" " alt="demo image"/>
      </li>
      <li>
          <img src=" " alt="demo image"/>
      </li>
      <li>
          <img src=" " alt="demo image"/>
      </li>
      <li>
          <img src=" " alt="demo image"/>
      </li>
  </ul>
  <ul>
      <li>
          <img src=" " alt="demo image"/>
      </li>
      <li>
          <img src=" " alt="demo image"/>
      </li>
      <li>
          <img src=" " alt="demo image"/>
      </li>
  </ul>         
</div>

CSS Only Pinterest-like Responsive Board Layout, Boardz.css Plugin/Github