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 or Gap

Space between two rows and two columns.

On the parent

display:
grid-template-columns: 
grid-template-areas:
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 ( gap )
place-items      ( justify-items | align-items )
place-content   (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

display: inline-grid;

Declaring display: grid gives you a one column grid

All the children converted to grid items

Explicit grids: grid-template-columns & grid-template-rows

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> - An 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>

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

Defines a size range greater than or equal to min and less than or equal to max.

minmax( <size> , <size> )

where <size> is:

<length> | <percentage> | <flex> | min-content | max-content | auto 

Used by:

grid-template-columns: minmax(min-content, 200px) minmax(300px, 1fr) 250px;  
grid-template-rows:
grid-auto-columns: minmax( 100px , 1fr );
grid-auto-rows: minmax( 3em , max-content );

min-content

When text is wrapped as small as possible, softwrapping but not breaking any words, in the inline direction, without overflow. Usually the longest word or link, or largest image.

max-content

Size with no wrapping, even if an overflow is caused.

fr
Fraction Unit
describes a fraction of the available* space

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

*The fr unit distributes available space, not all space. If a tracks has a large link or image, there's' less distributable space.

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.

Global (only one value per direction) spacing between grid items:

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.

gap

Not yet fully supported replacement for grid-gap used in grid, flex, columns.

    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

Specifies named grid areas.

grid-template-areas: "a b b"
   "a c d";

article {
  grid-area: b;
}

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

Next ➹