CODEWITHSUNDEEP
htmlcssdomlayoutcss-grid
Slbox
Slbox

Reputation: 13108

CSS Masonry Grid with Headings?

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:

enter image description here

Upvotes: 2

Views: 207

Answers (2)

Temani Afif
Temani Afif

Reputation: 272787

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>

Upvotes: 2

Yousaf
Yousaf

Reputation: 29282

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>

Upvotes: 2

Related Questions