CSS

Create a Responsive Card Grid with `grid-auto-fit`

Implement a highly responsive grid layout that automatically adjusts the number of columns based on available space using CSS Grid's `auto-fit` and `minmax` functions.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px; /* Space between grid items */
  padding: 20px;
  background-color: #eee;
}

.card {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

How it works: This snippet creates a flexible grid where columns automatically 'fit' into the available space. `repeat(auto-fit, minmax(250px, 1fr))` ensures each column is at least `250px` wide, but expands to fill space equally (`1fr`) if available, or wraps to a new row when space is limited. The `gap` property provides spacing between grid items.

Create a Responsive Card Grid with `grid-auto-fit`

Need help integrating this into your project?