Introduction

CSS Grid Layout (aka ‘Grid’), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces.

Terminology

Grid Container

The element on which display: grid is applied. It’s the direct parent of all the grid items. In this example container is the grid container.

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

Grid Item

The children (e.g. direct descendants) of the grid container. Here the item elements are grid items, but sub-item isn’t.

<div class="container">
  <div class="item"></div>
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

Grid Line

The dividing lines that make up the structure of the grid. They can be either vertical(column grid line) or horizontal(row grid line) and reside on either side of a row or column. Here the yellow line is an example of a column grid line.

Grid Track

The space between two adjacent grid lines. You can think of them like the columns or rows of the grid. Here’s the grid track between second and third row grid lines.

Grid Cell

The space between two adjacent row and two adjacent column lines. It’s a single ‘unit’ of the grid. Here’s the grid cell between row grid lines 1 and line2, and column grid lines 2 and 3.

Grid Area

The total space surrounded by four grid lines. A grid area may be comprised of any number of grid cells. Here’s the grid area between row and grid lines 1 and 3, and column grid lines 1 and 3.

Properties

Container

display
- grid: generates a block-level grid
- inline-grid: generates an inline level grid
- subgrid: if your grid container is itself a grid item(i.e. nested grids), you can use this property to indicate that you want the sizes of its rows/columns to be taken from its parent rather than specifying its own.
  1
  2
  3
  .container {
  display: grid | inline-grid | subgrid;
  }
  column, float, clear and vertical-align have no effect on a grid container
grid-template-rows & grid-template-columns
- : can be a length, a percentage, or a function of the free space in the grid(using the fr unit)
- : an arbitrary name of your choosing
1
2
3
4
.container {
grid-template-columns: <track-size> | [<line-name>] <track-size>;
grid-template-rows: <track-size> | <line-name> <track-size>;
}
A line can have more than one name, seperated by spcae.

You can use repeat() notation to streamline things:
1
2
3
.container {
grid-template-columns: repeat(3, 20px [col-start]) 5%;
}
The fr unit allows you to set the size of a track as a fraction of the free space of the grid container.

The free space is calculated after any non-flexible items.

grid-template-areas:

: the name of a grid area specified with grid-area
.: a period signifies an empty grid cell.
none: no grid areas are defined.

1
2
3

.container {
  grid-template-areas: <grid-area-name> | . | none;
}

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  grid-template-columns: repeat(4, 50px);
  grid-template-rows: auto;
  grid-template-areas:
    'header header header header'
    'main main . sidebar'
    'footer footer footer footer'
}

grid-template: a shorthand for setting grid-template-rows, grid-template-columns and grid-template-areas in a single decalration.
- none: sets all three properties to their initial values
- subgrid: sets grid-template-rows, grid-template-columns to subgrid, and grid-template-areas to its initial value.
- /: sets grid-template-rows and grid-template-columns to the specified values, respectively, and sets grid-template-areas to none
grid-column-gap & grid-column-gap: Specifies the size of the grid lines. You can think of it like setting the width of the gutters between the columns/rows.
- : a length value
grid-gap: a shorthand for grid-row-gap and grid-column-gap
justify-items: Aligns the content inside a grid item along with the row axis
- start: aligns the content to the left end of the grid area
- end: aligns the content to the right end of the grid area
- center: aligns the content in the center of the grid area
- stretch: fills the whole width of the grid area(this is the default)
This behavior can also be set on individual grid items via the justify-self property
align-items: aligns the content inside a grid item along the column axis. This value applies to all grid items inside the container.
- start: aligns the content to the top of the grid area
- end: aligns the content to the bottom of the grid area
- center: aligns the content in the center of the grid area
- stretch: fills the whole height of the grid area(this is the default)
This behavior can also be set on individual grid items via the align-self properties.
justify-content: Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container. This property aligns the grid along the row axis.
- start: aligns the grid to the left end of the grid container
- end
- center
- stretch: resize the grid items to allow the grid to fill the full width of the grid container.
- space-around: places an even amount of space between each grid item, with half-sized spaces on the far ends.
- space-between: places an event amount of space between each grid item, with no space at the far ends.
- space-evenly: places an even amount of space between each grid item, including the far ends
align-content:
- start
- end
- center
- stretch
- space-around
- space-between
- space-evenly
grid-auto-columns & grid-auto-rows:
- : can be a length, a percentage, or a fraction of the free space in the grid(using the fr unit)
To illustrate how implicit grid tracks get created, think about this:
1
2
3
4
.container {
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px;
}
This creates a 2 x 2 grid
1
2
3
4
5
6
7
8
.item-a {
grid-row: 2/3;
grid-column: 1/2;
}
.item-b {
grid-row: 2/3;
grid-column: 5/6;
}
We told .item-b to start on column line 5 and end at column line 6, but we never defined a column 5 or 6.

Because we referenced lines that don’t exist, implicit track with widths of 0 are created to fill in the gap.

We can use grid-auto-column and grid-auto-row to specify the widths of these implicit tracks:
1
2
3
.container {
grid-auto-columns: 60px;
}
grid-auto-flow: If you have grid items that you don’t explicitly place on the grid, the auto-placement algorithm kicks in to automatically place the items. This properties controls how the auto-placement algorithm works.
- row: tells the auto-placement algorithm to fill in each row in turn. adding new rows as necessary.
- column: tells the auto-placement algorithm to fill in each column in turn, adding new columns as necessary.
- dense: tells the auto-placement algorithm to attempt to fill in holes earlier in the grid if smaller items come up later.
dense might cause your items to appear out of order
grid: a shorthand for setting all of the following properties in a single declaration:
- grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow

Items

grid-column-start & grid-column-end & grid-row-start & grid-row-end
- determines a grid item’s location within the grid by referring to specific grid line.
- : can be number to refer to a numbered grid line, or a name to refer to a named grid line
- span
  
  : the item will span across the provided number of grid tracks
- span
  
  : the item will span across until it hits the next line with the provided name
- auto
grid-column & grid-row: shorthand for grid-column-start + grid-column-end and grid-row-start + grid-row-end, respectively.
- /
grid-area: gives an item a name so that it can be referenced by a template created with the grid-template-areas property. Alternatively, this property can be used as an even shorter shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end.
- : a name of your choosing
- / / /
justify-self: aligns the content inside a grid item along the row axis. This value applies to the content inside a single item.
- start
- end
- center
- stretch
align-self: aligns the content inside a grid item along the column axis. This value applies to the content inside a single grid item.
- start
- end
- center
- stretch