Layout mode

{{GlossarySidebar}} 

A layout mode, sometimes called layout, is a CSS algorithm that determines the position and size of element boxes based on the way they interact with their sibling and ancestor boxes.

There are several layout modes:

• Flow layout or normal flow

  • : All elements are part of normal flow until you do something to take them out of it.Normal flow includes:

    • Block layout
      • : Designed for laying out boxes such as paragraphs.
    • Inline layout
      • : Designed for laying out inline items such as text.

• Table layout

  • : Designed for laying out tables.

• Float layout

  • : Designed to cause an item to position itself left or right with the rest of the content in normal flow wrapping around it.

• Positioned layout

  • : Designed for positioning elements without much interaction with other elements.

• Multi-column layout

  • : Designed for laying content out in columns as in a newspaper.

• Flexible box layout

  • : Designed for laying out complex pages that can be resized smoothly.

• Grid layout

  • : Designed for laying out elements relative to a fixed grid.

[!NOTE] Not all CSS properties apply to all layout modes. Most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode.

See also

• Visual formatting model
• CSS display module