<div class='list'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
</div>
/////
<div class='list'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
</div>
.list {
margin-top: 10px;
width: 380px;
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.box {
width: 182px;
height: 100px;
background: red;
}
.box:last-child:nth-child(odd) {
width: 100%;
}
.list:last-of-type .box {
background: green;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.