CSS - Grid

Container

A grid container ⁴⁾ is the container element that has the display value set to:

• grid ⁵⁾
• or inline-grid ⁶⁾

#grid  {
  display: grid;
}

It contains the grid.

Grid

The grid is defined ⁷⁾ with the following three properties:

• grid-template-rows,
• grid-template-columns,
• and grid-template-areas

They define the grid of a grid container by specifying its explicit grid tracks.

The grid property ⁸⁾ is a shorthand that sets all of three explicit grid properties

Example: the following grid declares a grid with :

• four named areas: H, A, B, and F.
• the first column sized to fit its contents (auto),
• the second column taking up the remaining space (1fr).
• rows default to auto (content-based) sizing;
• the last row given a fixed size of 30px.

main {
  grid: "H    H "
        "A    B "
        "F    F " 30px
  /     auto 1fr;
}

Area

A grid area ⁹⁾ is a logical space name:

• that maps a name to one or more cell
• where grid items may be positioned

The grid area are defined using:

• the grid-template-areas ¹⁰⁾ property
• or the grid shorthand

Example:

• The below statement defined:
  • two areas: area1 and area2
  • and their space in the grid (ie mapping to grid cells)

#grid  {
  display: grid;
  grid-template-areas: ". area1"
                       "area2 area1"
                       ". area1";
}

• The following declares a grid with:
  • three rows and 5 evenly-sized columns
  • the middle row taking up all remaining space (and at least enough to fit its contents).

main {
  grid: auto 1fr auto / repeat(5, 1fr);
  min-height: 100vh;
}

Positioning

You can specify the position where the element should go, using :

Example:

grid-area: a;

grid-row: a; 
grid-column: a;

grid-row-start: a; 
grid-row-end: a; 
grid-column-start: a; 
grid-column-end: a;

grid-area: auto;

grid-row: auto;  
grid-column: auto;

grid-area: 2 / 4;

grid-row: 2; 
/* Place item in the second row. */
grid-column: 4; 
/* Place item in the fourth column. */

grid-area: 1 / 3 / -1;

grid-row: 1 / -1; 
grid-column: 3;

/* 1st grid row line = top of grid container */
grid-row-start: 1; 
/* span all rows */
grid-row-end: -1;
/* 3rd grid col line */
grid-column-start: 3;
/* right padding edge */ 
grid-column-end: auto; 

grid-area: header-start / 
sidebar-start / 
footer-end / 
sidebar-end;

grid-row: header-start / footer-end; 
grid-column: sidebar-start / sidebar-end;

In css, you would apply them in rule block. Example in a 2 columns x 3 rows.

#stats    { grid-column: 1; grid-row: 2; align-self: start; }
#controls { grid-column: 2; grid-row: 3; justify-self: center; }

Sizing

Sizing a grid means sizing the tracks. See the tracks definition section to know how to size a grid.

Item

The grid item ¹⁹⁾ are:

• the boxes
• of the grid child items (placed or not)
• representing the grid in-flow contents
• that are positioned in the grid

Cell

A grid cell ²⁰⁾ is the intersection of:

• a grid row
• and a grid column.

It is the smallest unit of the grid that can be referenced when positioning grid items.

Track

Grid track ²¹⁾ is a generic term for:

• a grid column
• or grid row

It's the space between any two adjacent lines on the grid.

The below properties define grid tracks:

• the grid-template-columns
• and grid-template-rows properties. .

They controls how wide or tall the column or row may grow.

The sizing calculation is done by the grid sizing algorithm

Example of a Grid with two columns and three rows. ²²⁾

#grid {
  display: grid;
  grid-template-columns: 150px 1fr;  /* two columns */
  grid-template-rows: 50px 1fr auto; /* three rows  */
}

where:

• Columns:
  • The first column is fixed at 150px.
  • The second column uses flexible sizing (It will take the remaining available width space of the grid container). Example:
    • If the grid container is 200px wide, the second column is 50px wide.
    • If the grid container is 100px wide, the second column is 0px (any content in the column will overflow)
• Rows:
  • The first row is fixed at 50px.
  • The second column is flexible
  • The third column sized to content

Line

grid lines can be referred to by:

• their numerical index,
• their name (Multiple lines with the same name establish a named set of grid lines)

The following code ²³⁾ names the lines in the grid with the sizing properties. (Some of the lines have multiple names)

#grid {
  display: grid;
  grid-template-columns: [first nav-start] 150px [main-start] 1fr [last];
  grid-template-rows: [first header-start] 50px [main-start] 1fr [footer-start] 50px [last];
}

Alignement / Space Distribution

The sized grid is aligned ^{24) 25)} according to the grid container’s:

• align-content
• and justify-content properties.

Example:

• Example 1:
  • the grid is centered vertically, and aligned to the right edge of its grid container

.grid {
  display: grid;
  grid: 12rem 12rem 12rem 12rem / 10rem 10rem 10rem 10rem;
  justify-content: end;
  align-content: center;
}

• Example 2:
  • justifies all columns by distributing any extra space among them,
  • centers the grid in the grid container when it is smaller than 100vh.

main {
  grid: auto-flow 1fr / repeat(auto-fill, 5em);
  min-height: 100vh;
  justify-content: space-between;
  align-content: safe center;
}

Overflow

The content may overflow if the cells in a grid are Block|.

One solution is to set the cell to a grid display with an autoflow to row.

display: grid;
grid-auto-flow: row;

Span

By default, a grid item has a span of 1. ²⁶⁾

Different spans can be given explicitly:

• Starts in the 2nd row, spans 5 rows down (ending in the 7th row).

.three {
  grid-row: 2 / span 5;
}

• Ends in the 7th row, spans 5 rows up (starting in the 2nd row).

.four {
  grid-row: span 5 / 7;
}

• Span from line “first” to line “middle”.

.five {
  grid-column: first / middle;
}

• Span between the 5th and 7th lines named “text”. (Multiple lines with the same name establish a named set of grid lines)

.six {
  grid-row: text 5 / text 7;
}

Media Query

This example ²⁷⁾ shows how it's possible to change the layout with different media query.

@media (orientation: portrait) {
  #grid {
    display: grid;
    grid-template-areas: "title stats"
                         "score stats"
                         "board board"
                         "ctrls ctrls";
    ...
  }
}

@media (orientation: landscape) {
#grid {
    display: grid;
    /* Different positions in the layout */
    grid-template-areas: "title board"
                         "stats board"
                         "score ctrls";
    ...  
  }
}

Float

floating is ignored

Unit

• Number are line number
• Name are line name or area name
• 1fr represents a 1 fraction of the leftover space in the grid container. ²⁸⁾

Overflow

See How to solve a CSS grid overflow ?