# Grid Basics — CSS

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

> Two-dimensional layout with rows and columns.

## display: grid

`display: grid` on the parent, then `grid-template-columns` and `grid-template-rows` define the track sizes. Children fall into cells automatically.

## A basic 3-column grid

`1fr` splits remaining space into equal fractions.

```css
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
```

## Placing items

`gap` sets spacing between cells. `grid-column: 1 / 3` and `grid-row: 2 / 4` place an item across specific track lines, letting it span multiple cells.

**Quiz:** What does the `fr` unit represent in Grid?

- [ ] A fixed number of pixels
- [x] A fraction of the available space
- [ ] A percentage of the font size

*Answer:* A fraction of the available space. 1fr means "one share of whatever space is left after fixed-size tracks are placed."