CSS Grid: Responsive Two-Column Layout

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* Left column (sidebar) 1 part, right column (content) 3 parts */
  gap: 20px; /* Space between grid items */
  padding: 20px;
}

.sidebar {
  background-color: #f0f0f0;
  padding: 15px;
  border-radius: 5px;
}

.content {
  background-color: #e9ecef;
  padding: 15px;
  border-radius: 5px;
}

/* Responsive behavior for smaller screens */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; /* Stacks columns into a single column */
  }
}

How it works: This snippet creates a responsive two-column layout using CSS Grid. The `.grid-container` is set to `display: grid`, and `grid-template-columns: 1fr 3fr` creates two columns: the first takes one fraction of the available space, and the second takes three. `gap` adds spacing between the columns. For smaller screens, a media query changes `grid-template-columns` to `1fr`, causing the two columns to stack vertically, providing a clean mobile experience. This demonstrates a fundamental approach to responsive page structure with Grid.