<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.