# Grid

CSS Grid lays a container's children out in rows and columns at once, with column widths you set in fr, % or px, gaps between the cells, and items that can span more than one cell.

Journeyman · CSS · Updated October 30, 2026

## After this lesson you can

- Set a grid's columns with display: grid and grid-template-columns, in fr, % and px
- Space grid cells with gap and padding, and stretch an item across columns or rows with span

## Key takeaways

- display: grid makes a grid with one column. grid-template-columns sets how many columns there are and how wide each one is.
- An fr is one share of the space that's left. 1fr 3fr 1fr makes the middle column three times as wide as each side column.
- Items fill the grid left to right, one row at a time, and start a new row when the columns run out.
- gap adds space between the cells, and padding adds space between the grid's edge and its outer cells.
- grid-column: span 2 makes an item two columns wide, and grid-row: span 2 makes it two rows tall.

A CSS Grid is the other new layout option introduced in CSS3. A FlexBox lets you lay out a page in one direction, using **either** `rows` **OR** `columns`. But, a CSS Grid allows you to define a full 2-dimensional grid using both `rows` **AND** `columns`.

## Defining a Grid

A grid is defined by specifying the `display` property. By default a grid only has one column, so you must also define the number of columns.

The `fr` unit means one fraction: one share of the space that's left. In this example there are 4 `1fr` columns, so each gets one share of four: 25% of the width. The items fill the grid left to right, one row at a time, so 8 elements make 2 rows in this 4-column grid.

```css
#parent-div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
```

![Grid with 8 child elements](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/09/771487178b5141a9be32b6aa0d789d88.png "Grid with 8 child elements")

## Column Width

The width of columns can be modified by defining `px`, `%` or using multiple `fr` units.

### Width using `fr`

The widths add up to 5 shares (1 + 3 + 1), so the middle column gets 3 of the 5 and the side columns get 1 each.

```css
#parent-div {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
}
```

![3 columns, middle 3x the size of the left and right](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/09/9be0a963520f4bdaae27a943eb26333f.png "3 columns, middle 3x the size of the left and right")

### Width using `%`

The right column takes 80% of the width, and the `1fr` column gets what's left: 20%.

```css
#parent-div {
    display: grid;
    grid-template-columns: 1fr 80%;
}
```

![2 columns, right column at 80%](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/09/6940e70c99b9414d8a3edf4aa2eb2c7c.png "2 columns, right column at 80%")

### Width using `px`

The left column is always 100px wide, and the three `1fr` columns share the rest equally.

```css
#parent-div {
    display: grid;
    grid-template-columns: 100px 1fr 1fr 1fr;
}
```

![4 columns, left column at 100px](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/09/34b5a00d2cc6426d9cbcf6f60627262f.png "4 columns, left column at 100px")

## Spacing Between Cells

By default, all space between cells (rows and columns) is 0.

![Grid with no padding or gap](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/09/2a237fa101d74d919b1010d75fa271f0.png "Grid with no padding or gap")

### Padding

Padding is used to define space between the grid's edge and its outer columns and rows. It adds nothing between the cells.

```css
#parent-div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 10px;
}
```

![Grid with 10px padding](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/09/065b43ea970845a793f8f2aabd63ea49.png "Grid with 10px padding")

### Gap

Gap is used to define the space between rows and columns. It adds nothing around the outside of the grid.

```css
#parent-div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 10px;
    gap: 10px;
}
```

![Grid with 10px padding and gap](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/09/03a9425d43c74a41826fc974e882bc24.png "Grid with 10px padding and gap")

## Column and row spans

Column and row spans are used to take up space of more than one column or row. A span goes on the item, not on the grid: `grid-column: span 2` makes an item two columns wide, and `grid-row: span 2` makes it two rows tall.

### Column

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

#parent-div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 10px;
    gap: 10px;
}
```

![Grid with div-2 column span](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/09/f12c2344ee32436d917bd5337619d594.png "Grid with div-2 column span")

### Row

```css
.div-2 {
    grid-row: span 2;
}

#parent-div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 10px;
    gap: 10px;
}
```

![Grid with div-2 row span](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/09/feb2bb76998445d2946cd1e8d6224006.png "Grid with div-2 row span")

## Grid Summary

A CSS Grid can also be defined by specifying named grid areas, and placing elements in each of those areas. There are also other properties that can be used to define page layout using Grid. A great resource is available [https://css-tricks.com/snippets/css/complete-guide-grid/](https://css-tricks.com/snippets/css/complete-guide-grid/).

To practice `span`, Grid Town's puzzle 11, *Two lots, wherever*, has you build a shop two lots wide: [try it on the game's page](https://www.ask-codey.com/games/grid-town/11?course=java-full-stack-bootcamp).

## Try it in Grid Town

[Grid Town, puzzles 1 to 7](https://www.ask-codey.com/games/grid-town/1): played right on the lesson page.

Now build a town. In Grid Town the town is a grid container and the houses are its grid items, so `display: grid`, `grid-template-columns` and `gap` put each house on the lot staked out for it. Two puzzles go a step past this lesson: `grid-template-rows` sizes the rows the way `grid-template-columns` sizes the columns, and `repeat(4, 1fr)` is a short way to write `1fr 1fr 1fr 1fr`. The first puzzle opens with a guide that shows every value before you start.

## Check yourself

2 questions to try on the lesson page.

## So what

Photo galleries, dashboards and whole page layouts are rows and columns, and with Grid you describe the columns once and let the items fill them in.

## Key terms

- [CSS Grid](https://www.ask-codey.com/glossary/css-grid)
- [Grid template columns](https://www.ask-codey.com/glossary/grid-template-columns)
- [Fraction unit](https://www.ask-codey.com/glossary/fraction-unit)
- [Gap](https://www.ask-codey.com/glossary/gap)
- [Grid span](https://www.ask-codey.com/glossary/grid-span)

Source: https://www.ask-codey.com/lessons/grid