Make element take two columns

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>

2 answers

  • answered 2018-11-07 23:17 MichaelvE

    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>

  • answered 2018-11-08 00:16 Michael_B

    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: