Pure CSS-only responsive masonry Grid Layout

CSS responsive masonry Grid Layout

Today we have minimalist masonry-like CSS Grid Layout which is simplest and builds with pure CSS. It allows implementing the grid Pinterest-like responsive grid layout.

You don’t need to rely on javascript or jquery to the buld grid. It is fully responsive and works well on all type of devices.

You are allowed to add image or video in any size; it will adjust the grid automatically. Let’s have a look the implementation.

How to use it:

Here is an example of HTML code which seems simple. You have to define the main masonry container and then list the each grip by defining the item class name.

<div class="masonry">
  <div class="item">
    <img src="1.jpg">
  </div>
  <div class="item">
    <div class="text-box">Text Block 1</div>
  </div>
  <div class="item">
    <img src="2.jpg">
  </div>
  <div class="item">
    <div class="text-box">Text Block 2</div>
  </div>
  ...
</div>

The core CSS styles:

.masonry {
  /* Masonry container */
  column-count: 4;
  column-gap: 1em;
  max-width: 1300px;
  margin: 0 auto;
}

.item {
  display: inline-block;
  background: #fff;
  margin: 0 0 1.5em;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.18);
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.item .text-box {
  padding: 1.5em;
  padding-top: 8px;
}

If you want to make the image or iframe to be responsive, you have to add the following CSS.

img, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

Here is a demo.

See the Pen ryYzoW by Leonel Oliveira (@leoneloliver) on CodePen.

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *