CSS - create group of boxes with CSS flex

0 votes
44 views
added Jan 19 in CSS by lcjr First Warrant Officer (11,830 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.
...