CSS 带标题的砌体网格？

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:

Answer 1

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>

Answer 2

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>