Layout values

<display-outside>

The outer display type: how the box takes part in its parent's layout. A block box starts on a new line and fills the available width; an inline box flows along a line of text.

On its own, an outer type implies flow inside. With an inner type it forms a two-keyword value such as inline flex, supported in Chrome 115 · Firefox 70 · Safari 15.

<display-inside>

The inner display type: which layout the box uses for its own children. On its own, an inner type implies block outside, so display: grid is display: block grid.

<display-listitem>

A box that generates a ::marker as well as its normal box, the way <li> elements do. The keyword list-item can be combined with an outer type and with flow or flow-root.

display: list-item is a block list item; display: inline list-item puts list items side by side while keeping their markers. Each list item also increments the built-in list-item counter.

<display-internal>

The roles of the parts inside a table or ruby layout. They let other elements stand in for table rows and cells, but only make sense inside a parent with the matching layout; on their own, the browser wraps them in the missing parent boxes.

The table-* values work in every browser and match the HTML table elements: table-row for <tr>, table-cell for <td>, table-header-group for <thead> and so on. ruby-text is in Chrome 121 and Firefox 38; ruby-base and the two container values are in Firefox only.

<display-box>

Whether the element generates a box at all.

<display-legacy>

Single-keyword names for inline-level versions of the inner types, kept from before two-keyword values existed. Each has a two-keyword equivalent.

<box-size>

A preferred, minimum or maximum size for a box: a non-negative length or percentage, or a keyword that sizes the box from its content or its container.

<line-style>

The pattern of a border, outline or column rule. Most styles need a width of at least a few pixels to be visible as anything other than a solid line.

<line-width>

The thickness of a border, outline or rule: a non-negative length, or one of the keywords thin, medium and thick. The keywords are commonly 1px, 3px and 5px.

The initial border width is medium, but a border whose style is none or hidden always has a used width of 0. Widths are snapped to whole device pixels.

<overflow>

The keywords for what happens to content that does not fit its box: show it, clip it, or clip it and allow scrolling. Each value is described under overflow.

Browsers also accept overlay as a legacy alias for auto; it is deprecated, so write auto.

<baseline-position>

Aligns items by their text baselines instead of their edges, so text in items of different sizes lines up. first baseline (the same as baseline) uses the first line of text, last baseline the last.

last baseline arrived later than the rest: Chrome 108 · Firefox 52 · Safari 16.2.

<content-distribution>

Shares the free space in a flex or grid container between and around its lines, tracks or items.

<content-position>

Packs the content of a flex or grid container as a whole towards one side or the centre.

<self-position>

Places one item within its own alignment area: its grid area, or the cross size of its flex line.

The values mean the same as in <content-position>. self-start and self-end use the item's own writing mode instead of the container's, which matters when an item has a different direction or writing-mode.

<overflow-position>

A modifier for what to do when an aligned item is bigger than its container. safe switches to start alignment if the item would otherwise overflow off the start edge, where it could not be scrolled to; unsafe keeps the requested alignment regardless.

Supported in Chrome 115 · Firefox 63 · Safari 17.6.

justify-content: safe center;

<track-size>

The size of one grid row or column. A track can have a single breadth, a minimum and maximum with minmax(), or grow to its content up to a limit with fit-content().

A <track-breadth> is a non-negative <length-percentage>, a <flex> value in fr, min-content, max-content or auto. The minimum in minmax() cannot be an fr value. See Grid & sizing for minmax() and fit-content().

<track-list>

The explicit tracks of a grid in one axis: a series of track sizes and repeat() groups, with optional line names between them.

<track-repeat> is repeat() with a whole number of repetitions. A list that uses repeat(auto-fill, …) or repeat(auto-fit, …) is the related <auto-track-list>, which allows one such automatic repeat among fixed-size tracks.

grid-template-columns: 12rem repeat(3, 1fr) auto;

<line-names>

Names for a grid line, written in square brackets between track sizes. A line can have several names, and items can then be placed by name instead of by number.

The quoted '[' and ']' in the grammar mean literal bracket characters. Lines named x-start and x-end can be referred to together as x, so grid-column: content spans from content-start to content-end in the example below.

grid-template-columns: [full-start] 1fr [content-start] minmax(0, 60rem) [content-end] 1fr [full-end];

<anchor-name>

The name of an anchor element, which positioned elements can then attach to. It is a <dashed-ident>, so it always starts with --.

<position-area>

Places an anchored element in a cell of a 3×3 grid drawn around its anchor, or across several cells with the span- keywords. Physical (top, left), logical (block-start, inline-end) and shorthand (start, end) forms are all accepted; center is the middle row or column.

One keyword from each axis picks a cell. A single keyword such as top spans all three cells of the other axis, so the element sits above the anchor, centred on it. A span- keyword covers the named cell plus the centre cell, and span-all covers all three.

.tooltip { position: absolute; position-anchor: --button; position-area: block-end span-inline-end; }

<try-tactic>

A way of deriving a fallback position by mirroring the element's current position. When the element would overflow, the browser tries the flipped position instead.

position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;