Motivating example: GUI

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

CSS Grid is designed for making GUIs:

Both the overall layout
and individual components.

Easy to change layout,
e.g., for narrow screen
or landscape/portrait.

Main characteristics (1/3)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Row & column sizes can be:

• fixed: 5em, 200px, etc.
• flexible: based on available space
• content-based: largest of elements in that column/row

Main characteristics (2/3)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

• Grid items can be placed with numeric coordinates:
  #main {grid-area: 2 / 4} /* 2nd row 4th col */
• Or refer to grid lines by name:
  #main {grid-area: top-line / main-start}
• Or refer to grid areas by name:
  #main {grid-area: area4}
• Unplaced items automatically into next empty slot
• Grids grow automatically.

Main characteristics (3/3)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

An item can be vertically and horizontally aligned within its slot.

Two items in the same area will overlap (see also limitations below), but you can control which is on top with ‘z-index’.

Abbreviated syntax for very large grids
grid: 1fr 1fr 1fr / repeat(18, 1fr)

Some terminology (1/2)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

• Grid container (an element)
• Grid (need not be the same size as the container)
• Grid item (child of a grid container*)
• Grid line (the edge of a row or column)
• Track (a row or column)

* unless absolutely positioned

Some terminology (2/2)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

• Grid cell (intersection of a row and a column)
• Grid area or slot (rectangular, one or more adjacent cells)
• Gutter or gap (space between rows and columns, default 0)
• Explicit grid (the grid that is explicitly specified)
• Implicit grid (the grid including automatically added tracks)

explicit = template implicit = auto

Accessibility

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Grid items can be placed anywhere in the grid.

But navigation is still based on source order, not visual order.

(If needed, you can also transform the DOM first.)

Direction and writing-mode

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Grids are oriented depending on 'direction' and 'writing-mode'

(I.e., like tables, but unlike absolute positioning or floats.)

(Floats will soon offer a choice between physical and relative directions.)

<div dir=ltr>
 <div dir=rtl>...
 <div dir=rtl>...
</div>

→ if you have text in Arabic or Hebrew scripts, you may need to add an explicit DIR=ltr on the grid element (and then reset to DIR=rtl on the grid items), otherwise the whole GUI may end up mirrored.

Making a grid container

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

display: grid or display: inline-grid

• A grid container is either block or inline. It cannot be a list item, a table caption, a table cell…
• A grid doesn't contain line boxes and thus floats do not intrude into it. (See example.)
• A grid's own margins collapse with boxes above and below,
  its children's margins do not collapse.
• A grid's contents may overflow, 'overflow' applies to it.

Grid items

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

<div class=grid>
 <div>...</div>
 ...
 <div>...</div>
</div>

• White space between grid item is ignored.
• Grid items have a 'display' property, but it only has effect on the ‘inside’ of the grid item.
  • In particular, a grid item can itself have 'display: grid'
• 'Float'/'clear' have no effect, but 'position' has.

Aligning grid items

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

By default, grid items fill their area (‘stretch’).

• Horizontal alignment with justify-self: auto, normal, stretch, left, right, start, end, self-start or self-end
• Vertical alignment with align-self: auto, normal, stretch, start, end, self-start, self-end or baseline
  (bottom/top are missing)

For 'baseline', see further down.

You can also set alignment on all items together with ‘justify-items’/‘align-items’ on the grid container.

The size of grid items

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

• If the item stretches:
  • margin + border + padding + width = width of track
    margin + border + padding + height = height of track
  • If 'width' is 'auto' (default), the content stretches.
  • Otherwise, one of the margins stretches.
• If the item is aligned to one side or centered:

  the size is computed similar to a float.

The order of automatic placement

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

The order property applies to grid items
unless they have an explicit position ('grid-area').

When unplaced items are assigned to empty slots,
items with lowest order are placed first.

Z-index of grid items

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Z-index applies to grid items

By default, if items overlap, the document order determines the z-order: later items on top.

Defining the explicit grid (1/3)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

grid-template-rows, grid-template-columns, grid-template-areas or use the shorthand grid

A grid with 3 rows and 2 columns:
grid: 10px auto 1fr / auto 3em

Ditto, but with limits on the first column:
grid: 10px auto 1fr / minmax(2em,15em) 3em

A grid with 18 columns, the first 17 of equal width:
grid: 10px auto 1fr / repeat(17, 1fr) 5em

Defining the explicit grid (2/3)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

A grid with 6 named areas, 3 empty areas and all sizes 'auto'
(An area name consisting only of dots indicates an unused area)

grid: "a1      a2   a2    a3"
      "left    left right right"
      "my-slot ...  ...   ..." 

Ditto with explicit sizes:

grid: "a1      a2    a2    a3"     10px
      "left    left  right right"  auto
      "my-slot ...   ...   ..."    1fr
      / 1fr    1fr   1fr   1fr

Defining the explicit grid (3/3)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

• Explicitly named grid lines:
  grid: [top] 10px [high] 1fr [bottom] / repeat(17, [a] 1fr [b])

  Note that many lines have the same name, many have two names.

• Areas create implicitly named lines
  grid: "top top top" "left middle right"
  
  • top-start
  • top-end = left-start = middle-start = right-start
  • left-end = middle-end = right-end
  • top-start = left-start
  • left-end = middle-start
  • middle-end = right-start
  • right-end = top-end

Defining how the grid grows (1/4)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

The grid grows automatically if

• There are more auto-placed items than free slots
• Items are placed outside the explicit grid

The final grid, including these additional grid cells is called the implicit grid

Defining how the grid grows (2/4)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

The 'grid' shorthand allows to specify either

• named areas (no control over height of additional rows), or
• the width of additional columns, or
• the height of additional rows.

If you need a combination, you'll need to use the longhand properties.

Defining how the grid grows (3/4)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Example: ← example
grid: auto-flow auto 1em / repeat(10, 5em)

• Grows down
• Added rows alternate between auto height and 1em
• Each new row has 10 columns of 5em each

Above is equivalent to:

grid-template-columns: repeat(10, 5em);
grid-auto-rows: auto 1em;
grid-auto-flow: row  /* default */

Defining how the grid grows (4/4)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Example:← example
grid: 50px auto auto / auto-flow 6em 4em

• Grows to the right
• Added columns have auto width
• Each column has two rows, of 6em and 4em high respectively

Above is equivalent to:

grid-template-rows: 50px auto auto;
grid-auto-columns: 6em 4em;
grid-auto-flow: column

Dense filling

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

By default, grid items are placed in order: each grid item without an explicit placement is either placed to the right of or below its immediate predecessor (whether automatically placed or not).

If you set replace auto-flow by auto-flow dense, the UA will put grid items without an explicit placement in the earliest possible free area that fits. I.e., such items may end up before a preceding sibling.

E.g., if there is a free slot of size 1x1 and one of 2x1, and two auto-placed items, one of 2x1 and one of 1x1, the first goes into the larger free slot and the second into the smaller.

Placing grid items (1/2)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Into a named area:
grid-area: a2

Into a single cell:
grid-area: 2 / 3 /* 2nd row 3rd column */

Into a span of cells:
grid-area: 2 / 3 / 4 / 7
or:
grid-area: 2 / 3 / span 2 / span 4

Placing grid items (2/2)

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Assume
grid: [a-line] 10px [mid] 1fr [b-line] / [lft] auto [rgt]

Now a-line=1, mid=2, b-line=3, lft=1, rgt=2, thus
grid-area: mid / lft / b-line / rgt
puts the item in the 2nd row.

Ambiguous names of areas and lines

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

An area and a line may have the same name
and multiple lines may have the same name. E.g.:

grid: "      w       x       y       z"      1fr
      "      v       v       v       v"      1fr
      / [v] 1fr [v] 1fr [v] 1fr [v] 1fr [v];

has an area ‘v’ and 5 vertical lines called ‘v’. ← example

Names are first searched among areas, then among lines. If there are multiple lines, add a number to indicate which you mean:

Auto-placement with a given size

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Grid items without grid-area (or grid-area: auto) are automatically placed in the next free cell.

To give auto-placed items a specific size:
grid-area: span 2 / span 5
finds the next free slot that has size for a cell of 2 rows high and 5 columns wide.

Gaps

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Adding empty space between rows and columns (by default none):

grid-row-gap: 2ex;
grid-column-gap: 0.3em

or

grid-gap: 2ex 0.3em

Note: If you use the grid shorthand, set the gap after the grid, because the shorthand resets all properties, including the gap

Baseline alignment

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

Just as table cells, grid items can be baseline-aligned:
align-self: baseline ← example

Use for documents

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

The (deeply nested) structure of documents rarely matches what Grid expects, but if it does, just use it!

Some of the limitations:

• Cannot put more than one element in a slot
  • (they will be on top of one another)
• Cannot align descendants other than children ← example
• Cannot control where grid element's text content goes
  • It will be auto-placed. Better avoid.
  • (This is planned for level 2.)