Looking to achieve a responsive layout using flex without the need for media queries.
Can anyone provide the CSS code for a layout using flex or grid? I've attempted the following:
.parent {
display: flex;
flex-wrap: wrap;
height: 100vh;
}
.box {
width: 33.33%;
border: 1px solid black;
min-height: 200px;
padding: 0 15px;
}
.box:first-child {
height: 100%;
min-height: 100%;
}
.box:nth-child(3n) {
min-height: 70%
}<div class="parent">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>