Grid lines

The vertical and horizontal lines that divide the grid and separate the columns and rows. Start counting at 1, not 0.

Grid cell

A single child or unit of a CSS grid.

Grid area

Any rectangular space surrounded by four grid lines. Can contain any number of grid cells.

Grid track

The space between two grid lines. This space can be horizontal or vertical: a grid row or grid column

Grid row

A horizontal grid track.

Grid column

A vertical grid track.

Gutter

Space between two rows and two columns.

On the parent

display:
grid-template-columns: 
grid-gap:

On the child

grid-columns:
grid-row: 

New values

repeat()
fr

display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template (shorthand)
grid-column-gap
grid-row-gap
grid-gap

justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

display: inline | block | list-item | inline-list-item | inline-block | flex | inline-flex| grid | inline-grid | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents | none | flow | flow-root

Defines the columns and rows of the grid with a space-separated list of values representing the track size

grid-template-columns: none | <track-list> | <auto-track-list>
grid-template-rows: none | <track-list> | <auto-track-list>

• <track-list> = <line-name>? [ <track-size> | <track-repeat> ]
• <track-size> - can be a length, a percentage, or a fraction of the free space (fr) in the grid
• <line-name> - ident or string

grid-template-columns: 200px 1fr max-content minmax(min-content, 1fr);

grid-template-columns: 
  150px 150px 150px;
  repeat(3, 150px);
  275px repeat(2, 150px);
  100px repeat(2, 1fr) 2fr;

grid-template-rows: 
  150px 150px 150px;
  repeat(3, 150px);
  275px repeat(2, 150px);
  100px 1fr 2fr;

Mix units!!!
That's the power of grid! Or,at least one of the powers.

You can name grid lines:

grid-template-columns: 
  [start] 150px 150px 150px [end];

• You can name none, some or all of the lines
• To name, put brackets around the ident

fr
Fraction Unit
describes a fraction of the available space

repeat()
repeat notation:
repeat(# of repeats, length)

length or percentage

% are relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If size of container depends on the size of its tracks, the % is treated as auto.

flex: fr

Positive fr value specifying the track’s flex factor. Each fr'ed track takes a share of the remaining space in proportion to its flex factor.

max-content

Equal to the largest of the max-contents in the grid track.

min-content

Equal to the largest of the min-contents in the grid track.

minmax(min, max)

A size between min and less. If max < min, then max is ignored and minmax(min,max) is treated as min.

auto

As a maximum, identical to max-content. As a minimum, represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

fit-content(length or percent)

Represents the formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e. minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum.

Gutter size: global spacing between grid items with:

grid-column-gap

vertical space between columns

grid-row-gap

horizontal space between rows

grid-gap

Shorthand for grid-row-gap and grid-column-gap, in that order. Can take one or two lengths or percents.

Only a single size for each axis.

    grid-column-gap: 20px;
    grid-row-gap: 1em;
    grid-gap: 1em 20px;

Margin works! Feature or bug?

1. Create grid container with the display property
2. Optional: Create columns and rows with either:
   1. grid-template-columns, and
   2. grid-template-rows
   or
3. Optional: add a gutter with grid gap or grid-column-gap and grid-row-gap

.myItem {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 5;
  }

  .myItem {
    grid-row: 2 / 4;
    grid-column: 2 / 5;
  }

.myItem {
    grid-area: 2 / 2 / 4 / 5;
  }

grid-area: a / b / c / d
grid-row-start / grid-column-start / grid-row-end / grid-column-end

grid-area: a / b / c;

grid-area: a / b; 

grid-area: a;

grid-column-start
grid-column-end
grid-column

grid-row-start
grid-row-end
grid-row

grid-area

justify-self
align-self

Our magic layout:

body {
  grid-template-areas:
      "header header header"
      "nav article aside"
      "footer footer footer";
}

header {
  grid-area: header;
}
nav {
  grid-area: nav;
}
article {
  grid-area: article;
}
aside {
  grid-area: aside;
}
footer {
  grid-area: footer;

Container Properties

justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

Item properties

justify-self
align-self

justify-items: 
  normal | stretch | baseline | start |  end | center | flex-end | 
  flex-start | legacy | safe | unsafe | left | right | 
  center | self-end | self-start | start | stretch | unset

Aligns items in the inline direction (horizontal)

justify-items: normal | stretch | 
   <baseline-position> | [ <overflow-position>? <self-position> ] |
  [ legacy || [ left | right | center ] ]

<baseline-position> = baseline | first baseline (start) | last baseline (end)

<overflow-position>? <self-position> = [safe | unsafe]? [right | center | left |
   start | flex-start | flex-end | end | self-start]

<overflow-position> = unsafe | safe

safe
If it overflows the alignment container, it aligns as if the alignment mode were start.

unsafe
No matter the relative sizes overflowing, the alignment value is honored.

legacy || left | center | right

legacy
Value inherits into descendants. Computes to inherit (if declared) or normal (if defaulting) if left | center | right not present.

Aligns items in the block direction (vertical)

align-items: 
  baseline | center | 
  end | flex-end | flex-start | left |  
  normal | right | safe | self-end | self-start | 
  start | stretch | unsafe 

• aligns content of all the grid cells to the content within each cell
• individual grid cell content alignment can be overwritten with align-self and justify-self.

place-items: <align-items>  <justify-items

• shorthand for align-items and justify items
• Order matters! align items is first.
• If only one value is declared, will be applied to both.

Defines how the items are aligned with respect to the grid if the size of all the items combined is not the same size as the container.

justify-content: baseline | center | end | flex-end | flex-start | 
   left | normal | right | space-around | space-between | space-evenly | start | 
   stretch | safe | unsafe

align-content: baseline | center | end | flex-end | flex-start | 
  left | normal | right | space-between | space-evenly | start | 
  stretch | safe | unsafe

Tip: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties

When items are placed outside of the tracks defined by grid-template-rows, grid-template-columns, and grid-template-areas, implicit grid tracks by added. These properties size those tracks

grid-auto-columns: 
grid-auto-rows:
grid-auto-flow:

Next ➹