# CSS Grid Layout

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay out items in rows and columns. It has many capabilities that allow for complex layouts to be built straightforwardly.

## 1. The Concept

Flexbox is designed for one-dimensional layouts (either a row OR a column). Grid is designed for two-dimensional layouts (rows AND columns at the same time).

## 2. The Grid Container

To start using Grid, you define a container element as a grid with `display: grid`.

```css
.container {
  display: grid;
  /* or inline-grid */
}
```

### Defining Columns and Rows

You define the columns and rows of the grid with `grid-template-columns` and `grid-template-rows`.

```css
.container {
  display: grid;
  grid-template-columns: 100px 200px auto; /* 3 columns */
  grid-template-rows: 50px 150px; /* 2 rows */
}
```

### The `fr` Unit

The `fr` unit represents a fraction of the available space in the grid container.

```css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
}
```

### `repeat()` Function

Used to repeat columns or rows.

```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Same as 1fr 1fr 1fr */
}
```

### Grid Gap

The `gap` property (formerly `grid-gap`) defines the size of the gap between the rows and columns.

```css
.container {
  gap: 20px; /* 20px gap between rows and columns */
  /* row-gap: 20px; column-gap: 50px; */
}
```

## 3. Placing Items

You can place items onto the grid using line numbers.

```css
.item1 {
  grid-column-start: 1;
  grid-column-end: 3; /* Spans from line 1 to line 3 (2 columns) */
  grid-row-start: 1;
  grid-row-end: 3;
}
```

**Shorthand:** `grid-column: 1 / 3;`

### `span` Keyword

You can specify how many columns/rows an item should span.

```css
.item1 {
  grid-column: span 2;
}
```

## 4. Grid Areas

You can name grid items and then reference them in the container to create a layout map.

```css
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}
```

## 5. Alignment

Grid has powerful alignment properties similar to Flexbox.

*   **`justify-items`**: Aligns items horizontally inside their cell (start, end, center, stretch).
*   **`align-items`**: Aligns items vertically inside their cell (start, end, center, stretch).
*   **`justify-content`**: Aligns the whole grid horizontally within the container.
*   **`align-content`**: Aligns the whole grid vertically within the container.

[[programming/css/css]]
[[programming/css/css3]]
[[programming/css/flexbox]]
[[programming/css/grid-template-areas]]