CSS - create group of boxes with CSS flex

0 votes
130 views
added Jan 19, 2024 in CSS by lcjr First Warrant Officer (11,900 points)

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>

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...