Flexbox Responsive Card Grid with Wrapping

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* Aligns cards to the start */
  margin: -10px; /* Counter-act item margins */
}

.card {
  flex: 1 1 300px; /* Shorthand for flex-grow, flex-shrink, flex-basis */
  margin: 10px; /* Spacing between cards */
  min-width: 280px; /* Ensure cards don't get too small */
  box-sizing: border-box;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 20px;
  text-align: center;
}

How it works: This snippet demonstrates a responsive card grid using Flexbox. The `.card-container` uses `display: flex` and `flex-wrap: wrap` to allow cards to flow to the next line when space runs out. Each `.card` uses `flex: 1 1 300px`, meaning it can grow (`flex-grow: 1`), shrink (`flex-shrink: 1`), but prefers a `flex-basis` of `300px`. If there's less space than `300px` available for a card, it will shrink, but `min-width: 280px` prevents it from becoming too small. Margins are used for spacing between cards and a negative margin on the container to align edges.