Adjust display settings to determine the fundamental layout behavior of an element.
Display settings control the layout behavior of child elements inside a parent element. Using different display settings, you can control layout in 1 or 2 dimensions and control how elements are displayed in relation to each other.
In this article, we’ll cover each display setting in the Style panel:
Block is the default display setting for most elements. Each child element in a block parent element starts on a new line and takes up the full width of its parent element unless a custom width is set.
Flexbox arranges direct children elements in 1 dimension — either horizontally or vertically. You can customize the direction in which the direct children stack, how they are aligned and justified within the parent element, if there’s a gap between them, and if they wrap to the next line.
When you create a flex parent element, all direct children of that parent element become flex children. You can override flex child layout settings (e.g., size, alignment, order) in the Flex child settings.
Grid arranges direct children in 2 dimensions — both horizontally and vertically — in columns and rows. You can customize how the direct children are positioned, aligned, and distributed within the grid, and add gaps between columns and rows. And, you can override grid child layout settings (i.e., position, spans, alignment, justification, and order) in the Grid child settings.
When determining grid sizing, you can use the FR unit — which automatically calculates row and column space while adjusting for gaps — to create fluid grids.
Child elements in an inline-block parent element are arranged side-by-side, and their width is determined by the content inside. Children wrap when the content hits the boundary of the parent element.
Note: When using inline-block, whitespace in HTML becomes visual space in the site design. Learn how to manage whitespace between inline-block elements.
Inline is the default display setting for any text content inside an element. You can change the layout of an inline element by changing its margins and padding, but you can’t change its width or height.
You can use the None display setting to hide an element completely. Elements set to none aren’t rendered by the browser, which can be handy for altering how content displays on mobile devices. Elements set to none are also removed from the accessibility tree, making the element and its children unavailable to assistive technology like screen readers.