Responsive Grid with Auto-Fitting Columns

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

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

How it works: This CSS Grid snippet creates a fully responsive layout where columns automatically adjust based on available space. `repeat(auto-fit, minmax(200px, 1fr))` ensures that as many columns as possible fit into the container, each being at least 200px wide but expanding equally (`1fr`) if there's extra space. `gap` adds consistent spacing between the grid items, resulting in a clean and adaptable layout.