Layout

Layout Mode

• developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode
• joshwcomeau.com/css/understanding-layout-algorithms

Normal Flow Layout

[MDN]

Table Layout

[MDN]

Positioned Layout

[MDN]

Multi-Column Layout

[MDN]

Flexible Box Layout (Flexbox)

[MDN]

Grid Layout

[MDN]

Grid areas can be named using grid-template-areas [MDN, W3, css-tricks.com]. Naming Grid areas also generates implicitly-assigned line names [W3]. Grid lines can be named explicitly with grid-template-rows or grid-template-columns [MDN, ref rows, ref columns]. Naming grid lines in the form foo-start/foo-end implicitly generates Grid area names [W3]. grid-templates is the shorthand property for defining grid columns, rows, and areas [MDN].

Subgrid is part of the CSS Grid layout specification Level 2. It is useful in nested grids that use the track definition of the parent grid. [MDN, w3c/csswg-drafts, caniuse]

Usually, only direct child elements of a grid container can be put on the grid. Using display: content, however, even grand-children can be put on the grid. [hidde.blog]