A good explainer of how the core concept of CSS is layout
Published by marco on
This is a nice ~13-minute explanation of how CSS is a declarative language, where you describe the metadata of your styles. The layout algorithm determines which property values affect the size and position of the element.
CSS makes sense when you realize it's a collection of algorithms by Kevin Powell (YouTube)
Generally the properties position and display properties determine which layout algorithm is used for a given element. The layouts are,
- Normal flow layout (MDN) (selected by default)
- Inline layout (MDN) (selected by default for inline elements)
- Flexible box layout (MDN) (selected with
display: flex) - Grid layout (MDN) (selected with
display: grid) - Inline layout (MDN) (selected with
display: grid) - Multi-column layout (MDN) (selected with
display: grid) - Positioned layout (MDN) (selected with
display: grid) - Flow layout (MDN) (selected
float: leftorfloat: right)
Most properties work the same in all layouts. Some properties only have an effect in a specific layout mode, e.g., grid-template-columns is ignored if the layout is not grid. Other properties are interpreted differently or completely ignored depending on layout mode, e.g., width and margin are ignored in the inline layout.