CSS - create group of boxes with CSS flex

Question

We can achieve this layout using CSS Flexbox or Grid. Here's an example using Flexbox:

CSS

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 220px;
  height: 150px; /* Set a fixed height or adjust as needed */
  margin: 10px;
  background-color: #e0e0e0; /* Optional: Add a background color */
}

 

HTML

<div class="container">
  <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>