Grid Cheat sheet
Tags: css, grid, cheatsheet
Published: 2022-08-06 19:58:52

## Grid Container

### display

Sets the grid container to either a block or inline level grid for grid items.

| Property | Description |
| --- | --- |
| grid | block grid |
| inline-grid | inline grid |

### grid-template-columns

Specifies how many columns and to what size the column widths will be. It is also possible to name the columns:

```css
.grid-container {
  grid-template-columns: [column1] 50% [column2] 40% [column3] 10%;
}
```

A shorthand for creating same sized columns, `repeat(<amount>, <size>)` can be used:

```css
.grid-container {
  grid-template-columns: repeat(3, 50px);
}
```

Which would be the same as writing:

```css
.grid-container {
  grid-template-columns: 50px 50px 50px;
}
```

#### Track Sizes

It is possible to add too many pixels or a percentage that would cause the columns to overflow off the page (data-loss) and the `fr` unit helps to prevent that.

The `fr` unit will take a fraction of what space is available to keep the columns on screen and also will adjust size according to the viewport size.

| Values | Description |
| --- | --- |
| 10px | set column width to 10 pixels |
| 10% | set column width to 10% |
| 2fr | set column width as a fraction of free space |


**NOTE:**
> All values used with `grid-template-columns` can be applied to `grid-template-rows` for the rows instead.

### grid-template-areas

Uses template referencing by giving names to grid areas using the `grid-area` property.

| Values | Description |
| --- | --- |
| grid-area-name | the name of a grid area |
| . | empty grid cell |
| none | no grid areas are defined |

```css
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-template-rows: repeat(2, 25px);
  grid-template-areas:
    "header header header"
    "sidebar item-1 . "
}

.grid-item-1 {
  grid-area: item-1;
}

.grid-item-2 {
  grid-area: header;
}

.grid-item-3 {
  grid-area: sidebar;
}
```

### grid-template

Shorthand for `grid-template-rows`, `grid-template-columns`, and `grid-template-areas` for a single line declaration.

| Values | Description |
| --- | --- |
| none | sets all three properties to initial values |
| rows / columns | sets the grid-template with a value |

```css
.grid-container {
  grid-template: 
    [row1-start] "header header header " 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}
```

Which would be the same as:

```css
.grid-container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto:
  grid-template-areas:
    "header header header"
    "footer footer footer";
}
```

### column-gap, row-gap, grid-column-gap, grid-row-gap

Defines the size of the grid lines also knowns as gutters.

| Value | Description |
| --- | --- |
| \<line-size\> | a length value |

### gap, grid-gap

Shorthand for `row-gap` and `column-gap`.

| Values | Description |
| --- | --- |
| \<row-gap\> \<column-gap\> | length values |

```css
.grid-container {
  gap: <row-gap> <column-gap>;
}
```

### justify-items

| Values | Description |
| --- | --- |
| start | aligns items to the start of the cell |
| end | aligns items to the end of the cell |
| center | aligns items to the center of the cell |
| stretch | fills the whole width of the cell (default) |

*Note*
This can be set individually by setting the `justify-self` property to a child.

### align-items

Aligns items along the column axis.

| Values | Description |
| --- | --- |
| stretch | fills the whole height of the cell (default) |
| start | aligns items to the start of the cell |
| end | aligns items to the end of the cell |
| center | aligns items to the center of the cell |
| baseline | aligns items along the text baseline with modifiers: `first baseline` or `last baseline` in the case of multi-line text |

### place-items

Sets both `align-items` and `justify-items` in a single declaration.

| Values | Description |
| --- | --- |
| \<align-item\> / \<justify-items\> | If the second value is not filled in, the first value will be given to both properties |

### justify-content

Aligns the grid along the row axis.

| Values | Description |
| --- | --- |
| start | aligns grid to the start of the container |
| end | aligns grid to the end of the container |
| center | aligns grid to the center of the container |
| stretch | resizes the grid items to fill the width of the container |
| space-around | places items an even amount from each other and half from edges |
| space-between | places even amount of space between items with the first being placed at the `start` of the container and the last item to the `end` of the container |
| space-evenly | places even amount of space between items from each other and the `start` and `end` of the container |

### align-content

Aligns the grid along the column axis.

| Values | Description |
| --- | --- |
| start | aligns grid to the top of the container |
| end | aligns grid to the bottom of the container |
| center | aligns grid vertically center of the container |
| stretch | resizes items to fill top to bottom of the container |
| space-around | even spacing between items, half space from edges |
| space-between | even spacing between items with no spaces at far ends |
| space-evenly | even amount of space between items and far ends |

### place-content

Shorthand for `align-content` and `justify-content`. If the second value is omitted the first will be used for both.

### grid-auto-columns, grid-auto-rows

Specifies the size of auto generated items.

```css
.grid-container {
  grid-auto-columns: 60px;
}
```

For any columns that should be added, they will have a width of 60 pixels.

### grid-auto-flow

Controls of the auto-placement works.

| Values | Description |
| --- | --- |
| row | generates new rows (default) |
| column | generates new columns as necessary |
| dense | attempts to fill in holes earlier if smaller items are generated |

### grid

Shorthand for setting all properties in a single declaration: `grid-template-rows`, `grid-template-column`, `grid-template-areas`, `grid-auto-rows`, `grid-auto-columns`, and `grid-auto-flow`.

| Values | Description |
| --- | --- |
| none | sets all sub-properties to initial values |
| \<grid-template\> | works the same as `grid-template` shorthand |
| \<grid-template-rows\> / [ auto-flow ] \<grid-auto-columns\> | sets `grid-template-rows`, if the `auto-flow` keyword is used on the right side, sets `grid-auto-flow` to column, on the left side will be set to row, if `grid-auto-columns` is omitted, set to auto by default |

#### Equivalent Examples

```css
.grid-container {
  grid: 100px 300px / 3fr 1fr;
}

.grid-container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}
```

```css
.grid-container {
  grid: auto-flow / 200px 1fr;
}

.grid-container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}
```

```css
.grid-container {
  grid: auto-flow dense 100px / 1fr 2fr;
}

.grid-container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}
```

```css
.grid-container {
  grid: 100px 300px / auto-flow 200px;
}

.grid-container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}
```

```css
.grid-container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

.grid-container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}
```