Grid

Container

Display

Defines the element as a grid container and establishes a new grid formatting context for its contents.

Grid-template-columns, grid-template-rows

Defines the columns and rows of the grid with a space-separated list of values.

Grid-template-areas

Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property. Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell.

Grid-column-gap, grid-row-gap

Specifies the size of the grid lines. You can think of it like setting the width of the gutters between the columns/rows.

Grid-gap

A shorthand for grid-column-gap + grid-row-gap.

Justify-items

Aligns the content inside a grid item along the column axis (as opposed to align-items which aligns along the row axis).

Align-items

Aligns the content inside a grid item along the row axis (as opposed to justify-items which aligns along the column axis).

Justify-content

This property aligns the grid along the column axis (as opposed to align-content which aligns the grid along the row axis).

Align.-content

This property aligns the grid along the row axis (as opposed to justify-content which aligns the grid along the column axis).

Grid-auto-columns, Grid-auto-rows

Specifies the size of any auto-generated grid tracks (aka implicit grid tracks).

Grid-auto-flow

This property controls how the auto-placement algorithm works. Any items not explicitly given a grid-row and grid-column will be auto aligned.

Child styles

Grid-column-start, grid-column-end, grid-row-start, grid-row-end

Determines a grid item’s location within the grid by referring to specific grid lines. Can use names specified in grid-template-columns and grid-template-rows.

Grid-column, grid-row

Shorthand for grid-column-start + grid-column-end, and grid-row-start + grid-row-end, respectively.

Grid-area

Gives an item a name so that it can be referenced by a template created with the grid-template-areas property. Alternatively, this property can be used as an even shorter shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end.

Justify-self

Aligns the content inside a grid item along the column axis (as opposed to align-self which aligns along the row axis).

Align-self

Aligns the content inside a grid item along the row axis (as opposed to justify-self which aligns along the column axis).

Flexbox

Examples

HTML

CSS

See the Pen Demo Flexbox 3 by CSS-Tricks (@css-tricks) on CodePen.

Container styles

Display

This defines a flex container.

Flex-direction

This establishes the main-axis.

Flex-wrap

Allow the items to wrap as needed.

Flex-flow

This is a shorthand flex-direction and flex-wrap properties. Default is row nowrap.

Justify-content

This defines the alignment along the main axis.

Align-items

This defines the default behaviour for how flex items are laid out along the cross axis.

Align-content

This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

Child styles

Order

This controls the order in which they appear in the flex container.

Flex-grow

This defines the ability for a flex item to grow if necessary.

Flex-shrink

This defines the ability for a flex item to shrink .

Flex-basis

This defines the default size of an element before the remaining space is distributed.

Flex

Shorthand for flex-grow, flex-shrink and flex-basis.

Align-self

This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.