# Common Grid Patterns — CSS

Source: https://www.geekswithgeeks.com/en/css/css-grid-patterns

> Auto-responsive grids and named areas.

## Auto-fit responsive grid

No media query needed — columns wrap automatically as the viewport shrinks.

```css
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
```

## Named grid areas

`grid-template-areas` reads like an ASCII diagram of the page.

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
}
.sidebar { grid-area: sidebar; }
.header  { grid-area: header; }
.main    { grid-area: main; }
```

## Grid vs Flexbox

Use **Grid** for two-dimensional page layout (rows AND columns); use **Flexbox** for one-dimensional arrangement (a single row or column of items). They combine well together.