Make element take two columns

Question

With CSS grid you can use grid-column: span 2:

.wrapper {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: dense;
  padding: 0.5rem;
}

.box {
  background-color: lightblue;
  padding: 0.5rem;
}

.a,
.d,
.e,
.f {
  background-color: lightcoral;
  grid-column: span 2;     /* <-- here is the trick */
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
</div>

Learn more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

Regarding masonry style: At the time of writing, Level 3 of the CSS Grid Layout specification includes a masonry value for grid-template-columns and grid-template-rows layout, though browser support is pretty non-existent: https://caniuse.com/?search=masonry

Learn about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout

So instead I used grid-auto-flow: dense; on the grid, which makes grid item G come before grid item F. It’s not really masonry style (placing elements in optimal position based on available vertical space), but it comes close by making the grid dense filling up all available horizontal space with the next grid item that fits that space.

“dense” packing algorithm attempts to fill in holes earlier in the grid

Learn about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

Oh, if you are new to CSS grid, I recommend watching Wes Bos’ talk “CSS Grid in 45 Minutes!”: https://www.youtube.com/watch?v=DCZdCKjnBCs

Leave a Comment Cancel reply