5

I'm wondering if this can be done with just flexbox or if I need to incorporate grid features as well. I'm attempting to have specific cells span multiple rows AND columns. Im my unique case, its just the first box needs to span the same width as the 2 boxes below it and the same height as the two to the right of it.

Heres the codepen with my initial attempt and I understand why its not working. Just wondering if theres a way to get this:

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 31.58585%;
  background-color: #f1f1f1;
  border: 1px solid #aaa;
  margin-bottom: 10px;
  margin-top: 10px;
  text-align: center;
}

.highlight {
  flex-basis: 65.9%;
}
<div id="container">
  <div class="box highlight">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
</div>

Into this:

enter image description here

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
TTa
  • 71
  • 3

1 Answers1

3

you need use css grid for this type of layout. it gives better flexibility.

#container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.box{
  background-color: #f1f1f1;
  border: 1px solid #aaa;
  text-align: center;
}

.highlight{
  grid-column: 1 / 3;
  /* grid-column: span 2; same as above */
  grid-row: 1/3;
}
<div id="container">
  <div class="box highlight">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>
patelarpan
  • 7,188
  • 2
  • 20
  • 25
  • I'd also recommend CSS grid for a layout like this but be careful with the compatibility of older browsers (especially IE). If you want to use flexbox you could edit your HTML and put box 1-3 in a separate row & 2+3 in a separate column. – Linus Apr 25 '18 at 07:40