Make element take two columns

Question

I tried to achieve the masonry style using css with the column layout like the markup below.

I want to know if it's possible to make the .green one to take two columns instead of one?

Thank you in advance!

.parent{
    column-gap: 1rem;
    column-count: 2;
}
.element{
  display:inline-block;
  background:red;
  width:100%;
  height:100px;
}

.green{
  background:green;
}

<div class="parent">

  <div class="element green">
  </div>
  
  <div class="element">
  </div>
  
  <div class="element">
  </div>
  
  <div class="element">
  </div>
  
</div>

Answer 1

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/mdn-css_properties_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

Answer 2

CSS Grid layout provides a simple, easy and efficient solution.

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 1rem;
}

.element.green {
  grid-column: 1 / -1;
  background: green;
}

.element {
  background: red;
}

<div class="parent">
  <div class="element green"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

More information:

• Make a grid column span the entire row
• CSS-only masonry layout

Answer 3

I would say, no you can't make the single .green element take up two columns, becuase you are specifically telling the browser to use two columns. If you need it to span the two columns, then I would suggest using a separate element. Perhaps a more suitable solution for this would be to use the CSS grid layout. The snippet below contains an example of both of these solutions:

.parent {
  column-gap: 1rem;
  column-count: 2;
}

.element {
  display: inline-block;
  background: red;
  width: 100%;
  height: 100px;
}

.green {
  background: green;
  width: 100%;
  height: 100px;
  margin-bottom: 1rem;
}

.grid-container {
  margin-top: 20px;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 1rem;
}

.greenGrid {
  background: green;
  height: 100px;
  grid-column-start: 1;
  grid-column-end: 3;
}

.redGrid {
  background: red;
  height: 100px;
}

<div class="green">
</div>


<div class="parent">


  <div class="element">
  </div>

  <div class="element">
  </div>

  <div class="element">
  </div>

</div>

<div class='grid-container'>
  <div class='greenGrid'></div>
  <div class='redGrid'></div>
  <div class='redGrid'></div>
  <div class='redGrid'></div>
</div>