CSS Grids

Grids aere the most flexible (no pun intended) of the available layout mechanisms. A grid, of course is a matrix of intersecting horizontal and vertical lines. The areas formed are called modules. Grids often have modules of equal area (and shape), but they are not limited to such. Grids can be created with static sizes, flexible sizes (percentages), using the fr (frame) unit, or any combination of these.

Items can be placed on the grid using line numbers, names, or by targeting grid areas. Alignment can be controlled overall, and/or by individual elements.

Like flex, grids have properties for both the parent and the children.

parent (grid container) properties

display: grid | inline-grid | subgrid;

grid-template-columns: <track-size> ... | <line-name> <track-size> ...;

Creates the columns of the grid with a space-separated list of values. The values are the track size, the spaces the grid lines. Lines can also be given names. There is also a repeat syntax, for repeating parts.

grid-template-columns: 10% 20% auto 20% 10%;

grid-template-columns: [first] 10% [second] 20% [third] auto [fourth] 20% [fifth] 10%;

grid-template-columns: repeat(5/1fr);

grid-template-rows

Same as grid-template-columns, except creating the rows.

grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";

Defines a grid by reference of names given by the grid-area property of the children. Repeats span columns, and period denote empty cells.

grid-template-areas:
	"hdr hdr hdr hdr"
	"mn mn . nv"
	"mn mn . nv"
	"ft ft ft ft";

grid-template

Shorthand for setting grid-template-rows, grid-template-columns and grid-template-areas. The grid property is more inclusive, and is recommended over grid-template.

grid-column-gap: <line-size>

grid-row-gap

Sets the width of the guide lines (or gutters to use typographic terminology). The gaps, as expected, are only inside the grid, not on the edges.

grid-gap: <grid-row-gap> <grid-column-gap>

Sorthand for previous two properties.

justify-items: start | end | center | stretch;

Sets alignment all items inside the grid on the row (horizontal) axis.

align-items

Sets alignment all items inside the grid on the column (vertical) axis.

justify-content start | end | center | stretch;

align-content

grid-auto-columns

grid-auto-rows

grid-auto-flow

grid

child (grid item) properties

grid-column-start

grid-column-end

grid-row-start

grid-row-end

grid-column

grid-row

grid-area

justify-self

align-self