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:
