Flexbox or CSS Grid: How to let one column be larger than two others?
How would you solve this Layout if you have only 3 Containers:
<div class="main-container"> <div class="blue-container"></div> <div class="red-container"></div> <div class="green-container"></div> </div> .main-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; align-content: stretch; } .blue-container, .red-container { width: 50%; } .green-container { flex-basis: 100%; width: 100%; } I solved it for Desktop (code above) and Mobile (everything flex-basis: 100%). But how to solve the tablet layout without adding more Markup/<div>‘s?
The grid solution. Look how compact and nice it is. For all tree conditions. Used grid-template-areas. Try it while resizing the viewport.
.main-container { display: grid; grid-template-areas: "blue red" "green green"; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; grid-gap: 10px; min-height: 150px; /*just for instance */ } .blue-container { grid-area: blue; background: blue; } .red-container { grid-area: red; background: red; } .green-container { grid-area: green; background: green; } /* tablet */ @media (max-width: 991.98px) { .main-container { grid-template-areas: "blue red" "green red"; } } /* mobile */ @media (max-width: 575.98px) { .main-container { grid-template-areas: "blue blue" "red red" "green green"; } }<div class="main-container"> <div class="blue-container"></div> <div class="red-container"></div> <div class="green-container"></div> </div>
Change your flex-direction to column and use the order property. Flex-basis will determine the height:
.main-container { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; align-items: stretch; align-content: stretch; height: 100vh; } .red-container { flex-basis: 100%; background: red; order: 3; } .green-container { background: green; order: 2; flex-basis: 25%; } .blue-container { background: blue; order: 1; flex-basis: 75%; }<div class="main-container"> <div class="blue-container"></div> <div class="red-container"></div> <div class="green-container"></div> </div>
