Distribute Items Evenly with Flexbox and Gap

.flex-container {
  display: flex;
  justify-content: space-between; /* Puts space between items */
  flex-wrap: wrap; /* Allows items to wrap to next line */
  gap: 20px; /* Space between rows and columns */
  padding: 10px;
  border: 1px solid #ccc;
}

.flex-item {
  padding: 15px;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  flex-basis: 150px; /* Minimum width for items */
  flex-grow: 1; /* Allows items to grow to fill space */
  text-align: center;
}

How it works: This Flexbox snippet showcases how to distribute items evenly within a container using `justify-content: space-between`. When `flex-wrap: wrap` is used, items will automatically move to the next line if space is insufficient. The `gap` property ensures consistent spacing between all grid items, both horizontally and vertically, making it easier to manage layout without negative margins. `flex-basis` and `flex-grow` allow items to have a minimum width and grow to fill available space.