<div>
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
<p>E</p>
<p>F</p>
</div>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
div{
width: 100%;
max-width: 1040px;
display: flex;
flex-flow: wrap row-reverse;
column-gap: 2%;
padding: 2rem;
margin: 0 auto;
}
p{
width: 32%;
aspect-ratio: 16 / 9;
font-size: 1.5rem;
font-weight: bold;
color: #fff;
background-color: #b9defa;
padding: 0.5rem;
margin-bottom: 2%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.