Flexbox for Dynamic Equal-Height Columns

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* Default, but explicit for clarity */
  gap: 20px;
  padding: 20px;
  background-color: #f0f0f0;
}

.flex-item {
  flex: 1 1 300px; /* Grow, Shrink, Basis */
  background-color: white;
  border: 1px solid #ddd;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex; /* To align content within the item if needed */
  flex-direction: column;
}

.flex-item h3 {
  margin-top: 0;
}

.flex-item p {
  flex-grow: 1; /* Pushes footer to bottom if item is also flex container */
}

How it works: This snippet uses Flexbox to create a set of columns that automatically adjust to equal heights, regardless of their content length. The `display: flex` on the container enables Flexbox. `flex-wrap: wrap` allows items to move to the next line when space runs out, making it responsive. Crucially, `align-items: stretch` (which is the default for flex containers) ensures that all flex items within a row stretch to the height of the tallest item. `flex: 1 1 300px` on the items allows them to grow, shrink, and sets a preferred width basis, providing responsive column behavior.