I am developing a widget that allows users to choose answers, and I would like to arrange them in a specific layout. Check out this example: https://jsfiddle.net/yxs1bmq6/1/
Try resizing the window and observe how the boxes behave.
Is there a straightforward method to create a layout similar to this one?
Here is the HTML:
<div class="container">
<div class="box">
box1
</div>
<div class="box">
box2
</div>
...
</div>
And here is the CSS:
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: space-around;
background-color: aqua;
height: 500px;
}
.box {
background-color: green;
padding: 50px;
}