Fluid Masonry Layout Using CSS Grid

Preview:

Description:

Yet another responsive, fluid, masonry layout built using CSS grid layout system.

Aims for providing a quick way to implement a Pinterest-like grid layout on modern web apps using pure CSS/CSS3.

How to use it:

1. The basic HTML structure for the masonry layout.

<section class="masonry">
  <div class="masonry-item cell cell-1">
    <img src="1.jpg">
  </div>
  <div class="masonry-item cell cell-2">
    <img src="2.jpg">
  </div>
  <div class="masonry-item cell cell-3">
    <img src="3.jpg">
  </div>
  <div class="masonry-item cell cell-4">
    <img src="4.jpg">
  </div>
  <div class="masonry-item cell cell-5">
    <img src="5.jpg">
  </div>
  <div class="masonry-item cell cell-6">
    <img src="6.jpg">
  </div>
  <div class="masonry-item cell cell-7">
    <img src="7.jpg">
  </div>
  <div class="masonry-item cell cell-8">
    <img src="8.jpg">
  </div>
  <div class="masonry-item cell cell-9">
    <img src="9.jpg">
  </div>
  <div class="masonry-item cell cell-10">
    <img src="10.jpg">
  </div>
  <div class="masonry-item cell cell-11">
    <img src="11.jpg">
  </div>
  <div class="masonry-item cell cell-12">
    <img src="12.jpg">
  </div>
  <div class="masonry-item cell cell-13">
    <img src="13.jpg">
  </div>
  <div class="masonry-item cell cell-14">
    <img src="14.jpg">
  </div>
</section>

2. The primary CSS styles for the masonry layout.

.masonry {
  background-color: #000324;
  width: 100%;
  height: 100vh;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(14, 1fr);
  row-gap: 1rem;
  column-gap: 1rem;
}
.cell-1 {
  grid-column: 1 / 6;
  grid-row: 1 / 6;
}

.cell-2 {
  grid-column: 6 / 9;
  grid-row: 1 / 11;
}
.cell-3 {
  grid-column: 9 / 12;
  grid-row: 1 / 4;
}
.cell-4 {
  grid-column: 12 / -1;
  grid-row: 1 / 4;
}
.cell-5 {
  grid-column: 1 / 4;
  grid-row: 6 / 11;
}
.cell-6 {
  grid-column: 4 / 6;
  grid-row: 6 / 7;
}
.cell-7 {
  grid-column: 4 / 6;
  grid-row: 7 / 11;
}
.cell-8 {
  grid-column: 1 / 6;
  grid-row: 11 / -1;
}
.cell-9 {
  grid-column: 6 / 12;
  grid-row: 11 / -1;
}
.cell-10 {
  grid-column: 9 / 12;
  grid-row: 4 / 11;
}
.cell-11 {
  grid-column: 12 / 13;
  grid-row: 4 / 6;
}
.cell-12 {
  grid-column: 13 / -1;
  grid-row: 4 / 6;
}
.cell-13 {
  grid-column: 12 / -1;
  grid-row: 6 / 13;
}
.cell-14 {
  grid-column: 12 / -1;
  grid-row: 13 / -1;
}

3. Make the layout fully responsive.

/* Responsive */
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .masonry {
    background-color: white;
    width: 100%;
    height: 100vh;
    padding: 1rem;
    display: flex;
    flex-flow: column;
  }
}

4. Auto resize the image to fit the grid item.

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  pointer-events: none;
}