Responsive Two-Column Layout with CSS Grid

.grid-container {
  display: grid;
  /* Creates responsive columns: auto-fit fills available space,
     minmax ensures columns are at least 250px but can shrink to 1fr */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
  background-color: #e0f7fa;
}

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

How it works: This CSS Grid snippet creates a highly responsive two-column (or multi-column) layout. `display: grid;` activates the grid container. The magic lies in `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));`. `repeat()` is used to create columns based on a pattern. `auto-fit` will create as many columns as can fit without overflow. `minmax(250px, 1fr)` ensures that each column is at least `250px` wide, but if there's extra space, it will grow to `1fr` (a fraction of the available space), making the columns stretch evenly. `gap` provides space between grid items.