CSS Masonry Grid with Headings?

Question

I have an existing project I'm trying to move to a masonry-like layout without modifying the DOM structure.

I'm wondering if it's possible to create this sort of grid layout from the existing DOM.

The DOM looks like this:

<div id="masonry-container">
  <div class="heading"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="heading"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

The intended end result would be something like this:

Something like this maybe? https://stackoverflow.com/q/44377343/3597276 — Michael Benjamin, Jun 26 '20 at 18:38

Yousaf · Accepted Answer · 2020-06-26T19:31:58.527

You just need to make .heading element span full column width and some of the elements to span 2 rows.

#masonry-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 50px;
  grid-gap: 5px;
}

.item,
.heading {
  background: #fc9;
  border-radius: 5px;
}

.heading {
  grid-column: 1 / -1;
  background: #fc3;
}

.span2 {
  grid-row: span 2;
}

<div id="masonry-container">
  <div class="heading">Heading</div>
  <div class="item"></div>
  <div class="item span2"></div>
  <div class="item"></div>
  <div class="item span2"></div>
  <div class="item span2"></div>
  <div class="item span2"></div>
  <div class="heading">Heading</div>
  <div class="item"></div>
  <div class="item span2"></div>
  <div class="item"></div>
  <div class="item span2"></div>
  <div class="item span2"></div>
  <div class="item span2"></div>
</div>

Temani Afif · Answer 2 · 2020-06-26T19:37:27.860

You can try like below:

#masonry-container {
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: 50px;
  grid-gap: 5px;
}

#masonry-container > * {
  background: red;
  border-radius: 5px;
}

.heading {
  grid-column: span 4;
}

.item:nth-child(7n + 3),
.item:nth-child(7n + 6) {
  grid-row: span 2;
  grid-column: 1;
}

.item:nth-child(7n + 4),
.item:nth-child(7n + 7) {
  grid-row: span 3;
  grid-column: 2;
  height: 66%;
}

.item:nth-child(7n + 6) {
  grid-column: 3;
}

.item:nth-child(7n + 7) {
  grid-column: 4;
}

<div id="masonry-container">
  <div class="heading"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="heading"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS Masonry Grid with Headings?

The DOM looks like this:

The intended end result would be something like this:

2 Answers2