Build a Responsive Grid with Auto-Adjusting Columns using CSS Grid

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

.grid-item {
  background-color: #add8e6;
  padding: 20px;
  border: 1px solid #6a5acd;
  text-align: center;
}

How it works: This snippet demonstrates a highly responsive grid layout using CSS Grid. `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))` ensures that grid items will automatically create as many columns as possible (fitting at least 250px wide) and distribute remaining space equally (`1fr`), without needing explicit media queries. The `gap` property adds spacing between grid items.