CSS Only Pinterest-like Responsive Board Layout – Boardz.css

Preview:

Description:

Boardz.css is a very lightweight CSS library which lets you generate a responsive, adaptive, Pinterest board-like grid layout from normal html lists.

How to use it:

Download and put the CSS file boardz.css in the header of the html document.

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

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>

To create a ‘fitted’ board layout, just by adding the class fitted to the div of the Boardz element, such as <div class=”boardz fitted”>, the Boardz object justifies the columns vertically, making the whole board looking more like a rectangle.

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

Boardz can be used with images as well. Below is an example Boardz that mixes image and text cells.

<div class="boardz centered-block">
  <ul>
      <li>
          <img src="https://kingofwallpapers.com/poster/poster-003.jpg" alt="demo image"/>
      </li>
      <li>
          <img src="https://2.bp.blogspot.com/-pINYV0WlFyA/VUK-QcGbU5I/AAAAAAAABcU/fNy2pd2cFRk/s1600/WEB-Jack-White-Poster-Creative.png" alt="demo image"/>
      </li>
      <li>
          <img src="https://payload140.cargocollective.com/1/10/349041/5110553/Florrie.jpg" alt="demo image"/>
      </li>                    
  </ul>
  <ul>
      <li>
          <img src="https://cdn3.volusion.com/prakm.mcyzp/v/vspfiles/photos/TWAMBLUE-2.jpg" alt="demo image"/>
      </li>
      <li>
          <img src="https://wpmedia.ottawacitizen.com/2015/11/01.jpg?quality=55&strip=all&w=840&h=630&crop=1" alt="demo image"/>
      </li>
      <li>
          <img src="https://s-media-cache-ak0.pinimg.com/736x/8c/ee/ff/8ceeff967c03c7cf4f86391dd6366544.jpg" alt="demo image"/>
      </li>
      <li>
          <img src="https://s-media-cache-ak0.pinimg.com/originals/87/16/8c/87168cbbf07cb54a9793bebaa20b1bde.jpg" alt="demo image"/>
      </li>
  </ul>
  <ul>
      <li>
          <img src="https://images.fromupnorth.com/077/54a12d7458673.jpg" alt="demo image"/>
      </li>
      <li>
          <img src="https://s-media-cache-ak0.pinimg.com/736x/22/95/48/229548086245c332443109ca9f2e0890.jpg" alt="demo image"/>
      </li>
      <li>
          <img src="https://inspirationfeeed.files.wordpress.com/2014/01/ca402f7410884454ec5c303336e8591d1.jpg" alt="demo image"/>
      </li>
  </ul>         
</div>