display
Choose how an element participates in flow and lays out its children.
Overview
| Class | Declarations |
|---|---|
hidden | display: none;
|
flex | display: flex;
|
grid | display: grid;
|
inline | display: inline;
|
block | display: block;
|
table | display: table;
|
contents | display: contents;
|
flow-root | display: flow-root;
|
list-item | display: list-item;
|
inline-block | display: inline-block;
|
inline-flex | display: inline-flex;
|
inline-grid | display: inline-grid;
|
inline-table | display: inline-table;
|
table-cell | display: table-cell;
|
table-caption | display: table-caption;
|
table-row | display: table-row;
|
table-column | display: table-column;
|
table-row-group | display: table-row-group;
|
table-column-group | display: table-column-group;
|
table-header-group | display: table-header-group;
|
table-footer-group | display: table-footer-group;
|
display:<type> | display: <type>;
|
Basic usage
Block and inline boxes
Use block to start a new block, inline to participate in the surrounding text, and inline-block for an inline box that accepts width and height. Compare where the text before and after each specimen ends up.
<div> Block elements start on a new line. <span class="block"> display:block </span> Inline elements stay in text flow. <span class="inline"> display:inline </span> Inline-block elements accept dimensions. <span class="inline-block"> display:inline-block </span> Choose the display mode for the layout.</div>Flex
Use flex when direct children should share one row or column. The container itself participates in the outer layout as a block.
<div class="flex items-center gap-sm"> <div>01</div> <div>02</div> <div>03</div></div>Inline flex
Use inline-flex for a badge or compact control whose children need flex alignment while the whole object stays in a line of text.
<p> Status: <span class="inline-flex items-center gap-xs"> <span aria-hidden="true">●</span><span>In progress</span> </span> while the next task is queued.</p>Grid
Use grid to place direct children in rows and columns. Define tracks with grid-template-columns or grid-template-rows.
<div class="grid grid-template-columns:repeat(2,auto) gap-sm"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>Inline grid
Use inline-grid when a small grid should sit within text or beside other inline content. Its children use grid layout; the grid itself remains inline.
<p> Before <span class="inline-grid grid-template-columns:repeat(2,auto) gap-sm"> <span>01</span><span>02</span> <span>03</span><span>04</span> </span> after.</p>Table
Table display values reproduce the visual table layout model. Use native <table>, <tr>, <th> and <td> elements for tabular data: CSS display values do not supply their accessibility semantics.
<div class="table"> <div class="table-caption">Orders</div> <div class="table-header-group"> <div class="table-row"> <div class="table-cell">Product</div> <div class="table-cell">Qty</div> <div class="table-cell">Price</div> </div> </div> <div class="table-row-group"> <div class="table-row"> <div class="table-cell">Milk</div> <div class="table-cell">2</div> <div class="table-cell">10.00</div> </div> <div class="table-row"> <div class="table-cell">Cola</div> <div class="table-cell">3</div> <div class="table-cell">12.00</div> </div> <div class="table-row"> <div class="table-cell">Juice</div> <div class="table-cell">5</div> <div class="table-cell">18.00</div> </div> </div> <div class="table-footer-group"> <div class="table-row"> <div class="table-cell">Total</div> <div class="table-cell text-center">10</div> <div class="table-cell text-center">40.00</div> </div> </div></div>Contents
Use contents to omit a wrapper’s own layout box. Its children then participate directly in the parent’s layout. The wrapper remains in the DOM, but its own background, border and dimensions no longer produce a box.
<div class="flex gap:1.25rem"> <div class="flex:1">01</div> <div class="contents"> <div class="flex:1">02</div> <div class="flex:1">03</div> </div> <div class="flex:1">04</div></div>Flow root
Use flow-root on a wrapper that should contain its floated children. It establishes a block formatting context without using overflow clipping.
<div class="flow-root"> <img class="float:left w:8rem mr-md" src="/demo/landscape.svg" alt="Landscape"> <p>The paragraph wraps around the floated image.</p></div>List items
Use list-item to generate a list-item box and marker. Prefer <ul> or <ol> with <li> for semantic lists; this utility controls their visual display.
<div> <div class="list-item">01</div> <div class="list-item">02</div> <div class="list-item">03</div></div>Hidden
Use hidden to apply display:none. The element and its descendants produce no layout boxes and are absent from the accessibility tree. Use visibility when its space should remain.
<div class="flex gap:1.25rem"> <div>01</div> <div class="hidden">02</div> <div>03</div></div>Apply conditionally
Switch the same items from a grid to a flex row on screens at sm, then use ordinary block flow in print. Combining screen and sm keeps the wide-screen rule from also applying to wide printed pages. Read conditions for breakpoint and media syntax.
<div class="grid grid-cols:2 gap-sm block@print flex@screen@sm"> <div>01</div> <div>02</div> <div>03</div></div>