# Layout
## Overview
Azul lays out a `Dom` from its CSS-resolved styles. Every element runs
through one of four formatting modes selected by its `display` property:
block, inline, flex, or grid. The four sub-pages cover each mode from
simple to complex. Blocks first (the default), then inline text flow,
then the two opt-in container modes.
- **Block**. The default. Full-width stacked boxes. See
[Blocks, Sizing, and Positioning](layout/blocks.md).
- **Inline**. Text and inline-block runs inside a block. See
[Inline, Inline-Block, and Text Flow](layout/inline.md).
- **Flex**. One-axis containers (rows or columns). See
[Flexbox](layout/flex.md).
- **Grid**. Two-axis containers (columns and rows). See
[Grid](layout/grid.md).
## Picking a mode
Most apps use blocks for the page chrome, flex inside each block for rows
and columns, and grid where you need a true 2-D layout (dashboards, image
galleries, form labels with fields). Inline shows up naturally inside any
block that contains text. You usually don't choose it explicitly.
```rust
# fn body() -> &'static str {
"
...The article body, which lays out as a block by default.
"
# }
```
## Cross-mode properties
A few properties apply regardless of the formatting mode:
- `width` / `height` and the `min-` / `max-` constraints. See [Sizing](layout/blocks.md#sizing-width-height-and-min--max--constraints).
- `padding` and `margin`. See [`margin` and `padding`](layout/blocks.md#margin-and-padding).
- `box-sizing`. See [`box-sizing`](layout/blocks.md#box-sizing).
- `position`, `z-index`, and `overflow`. See [`position`](layout/blocks.md#position) and [`overflow`](layout/blocks.md#overflow).
- `gap`, `row-gap`, `column-gap`. Honoured by flex and grid. Ignored on plain block.
Block-specific details (float, `clear`, and `display: table*`) live on
the [Blocks](layout/blocks.md) and [Inline](layout/inline.md) pages.
App code interacts with layout only through CSS properties and
`Dom::style(...)` / `Dom::with_css(...)`.
## Visual examples
Same three children, three formatting modes:
```azul-render screenshot=layout-block width=480 height=200 subtitle="Default block flow. Each element on its own line"
first
second
third
```
```azul-render screenshot=layout-flex width=480 height=160 subtitle="Same children with display: flex"
first
second
third
```
```azul-render screenshot=layout-grid width=480 height=200 subtitle="Same children with display: grid"
first
second (2fr)
third
```
## Coming Up Next
- [Simple Layout](layout/blocks.md) — Explains block formatting, sizing, positioning, the box model and how to handle overflowing content
- [Inline Layout](layout/inline.md) — Text flow, word breaks, writing modes, multi-column
- [Flexbox](layout/flex.md) — One-axis container layout with grow/shrink/basis
- [Grid](layout/grid.md) — Two-axis container layout with tracks and areas