# Display The --display utility and the keywords the kit adds to it: flex directions, the pile, the gallery, and subgrids. Source: https://www.zazz.sh/api/foundations/display/ `--display` writes the CSS `display` property, so it takes whatever `display` takes: `block`, `flex`, `grid`, `none`, `contents`. The kit adds thirteen keywords of its own. Each sets a display and the thing you would otherwise set right after it: a flex direction, a shared cell, or a set of grid tracks. | Keyword | What you get | | --- | --- | | `flex-row`, `flex-col` | a flex container and its direction | | `flex-row-reverse`, `flex-col-reverse` | the same, laid out from the far end | | `inline-flex-row`, `inline-flex-col`, and their `-reverse` forms | an inline flex container and its direction | | `grid-pile` | a grid with every direct child in one cell, centered | | `grid-gallery` | a grid that picks its column count from its child count | | `subgrid` | a grid on its parent grid's columns and rows | | `subgrid-col` | a grid on its parent grid's columns | | `subgrid-row` | a grid on its parent grid's rows | ## Breakpoints and spelling `--display` takes breakpoints and no states. A tier needs a base, so write `--display: none; --display--md: flex` to hide something below `md`; `--display--md: flex` alone does nothing. Every keyword works at every breakpoint: `--display: flex-col; --display--md: grid-gallery` is a stack on a phone and a gallery from `md` up. The kit matches the keywords as text, so they need exactly [one space after the colon](/api/utilities/#one-space-after-the-colon). `--display:flex-col` is not a flex container. The editor and `` flag it. ## Flex direction The direction is part of the display, and there is no `--flex-direction` utility. A plain `flex` or `inline-flex` at a breakpoint goes back to a row. ```html
--display: flex-row
1
2
3
--display: flex-col
1
2
3
``` The `-reverse` forms lay the children out from the far end. Only the picture changes. A screen reader and the Tab key still follow the order in the markup, so don't reverse anything a person has to move through in sequence. ```html
--display: flex-row-reverse
1
2
3
--display: flex-col-reverse
1
2
3
``` The `inline-flex-` forms sit in a line of text, the way `inline-flex` does. ```html

An inline-flex-row box sits in the line one two and the sentence carries on.

An inline-flex-col box stacks its children one two and the sentence carries on.

``` For wrapping, growing, and alignment, see [flexbox and grid](/api/utilities/flexbox-grid/). ## Pile `--display: grid-pile` puts every direct child in the same grid cell and centers it. It does what `position: absolute` layering does, except that the children stay in flow and the tallest one sets the height. ```html
grid-pile stacked layer
``` The centering beats a primitive's own alignment. A child's own placement wins over it, and so do `--place-items` and `--items` on the pile. On a layered hero, add `--isolation: isolate` so the layers' `--z` values stay inside it. ## Gallery `--display: grid-gallery` works out its own column count. It puts as many children in a row as fit, up to six, and it won't pick a count that leaves one child alone in the last row. Six children go 6, then 4 + 2, then 3 + 3 as the space narrows. They never go 5 + 1. ```html
4 children: one row of four, or 2 + 2
1
2
3
4
5 children: one row of five, or 3 + 2
1
2
3
4
5
7 children: 5 + 2, or 4 + 3
1
2
3
4
5
6
7
``` A child is at least `--ui-gallery-min-w` wide, `20ch` by default. Set it on the gallery to change how soon the columns drop: `--ui-gallery-min-w: 12rem` suits cards, and something like `5rem` suits logos. It can't always avoid a lone child: - At two columns an odd count still ends on one. The only alternative is a single column, which is worse. - 13, 21, 25, and 31 children end on one at some widths, because the next count down leaves one alone too. A few things to know before you rely on it: - It counts the children that take a cell. Children with `hidden`, and `