Layout

Display

Style syntax for controlling the element's inner and outer display types.

🚧This page is still under construction and some content may not be complete.

Class	Declarations
`display:type` `/` `d:type`	`display: type`
`hidden` `/` `hide`	`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`

Basic usage

Block & Inline

Use block, inline, and inline-block to set the flow of elements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

display:block

Nulla et elit dictum, tempor augue quis, rhoncus enim. Nunc lacinia, velit vel convallis tincidunt, ante nisi maximus nunc, at aliquam nisi lectus in mauris. Nam eros sem, ullamcorper nec mollis nec, imperdiet a metus. Nunc pulvinar tortor ipsum,

display:inline

nec malesuada tellus posuere id. Nullam sed nulla eget ante ultrices tristique. Orci varius natoque penatibus et magnis dis parturient montes,

display:inline-block

nascetur ridiculus mus. Proin sodales turpis ut dolor posuere, nec aliquet nulla dapibus.

<div>
    Lorem ipsum dolor sit amet…
    <span class="block">
        display:block
    </span>
    Nulla et elit dictum, tempor augue quis, …
    <span class="inline">
        display:inline
    </span>
    nec malesuada tellus posuere id. …
    <span class="inline-block">
        display:inline-block
    </span>
    nascetur ridiculus mus. …
</div>

Flex

Use flex to create a block-level flex container.

aron

Front-end needs a revolution

<div class="flex gap:12 ai:center">
    <img src="…">
    <div>
        <div>aron</div>
        <p>Front-end needs a revolution</p>
    </div>
</div>

Inline Flex

Use inline-flex to create an inline-level flex container.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et elit dictum, tempor augue quis, rhoncus enim. Nunc lacinia, velit vel convallis tincidunt, ante nisi maximus nunc, at aliquam nisi lectus in mauris. Nam eros sem, ullamcorper nec mollis nec, imperdiet a metus. Nunc pulvinar tortor ipsum,

aron

nec malesuada tellus posuere id. Nullam sed nulla eget ante ultrices tristique. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales turpis ut dolor posuere, nec aliquet nulla dapibus.

<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. …
    <div class="inline-flex ai:baseline mx:12">
        <img src="…">
        <div>Aron</div>
    </div>
    nec malesuada tellus posuere id. …
</div>

Grid

Use grid to create a block-level grid container.

<div class="grid grid-template-cols:repeat(2,auto) gap:12">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
</div>

Inline Grid

Use inline-grid to create a inline-level grid container.

<div class="inline-grid grid-template-cols:repeat(2,auto) gap:12">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
</div>
<div class="inline-grid grid-template-cols:repeat(2,auto) gap:12">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
</div>

Table

Use table, table-row, table-column, table-cell, table-caption, table-row-group, table-column-group, table-header-group, and table-footer-group to create elements that behave like their respective table elements.

Orders

Product

Qty

Pirce

Milk

10.00

Cola

12.00

Juice

18.00

<div class="table">
    <div class="table-caption">Orders</div>
    <div class="table-header-group bg:slate-92">
        <div class="table-row">
            <div class="table-cell">Product</div>
            <div class="table-cell">Qty</div>
            <div class="table-cell">Pirce</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 bg:slate-92">
        <div class="table-row">
            <div class="table-cell">Total</div>
            <div class="table-cell t:center">10</div>
            <div class="table-cell t:center">40.00</div>
        </div>
    </div>
</div>

Use contents to make the element’s children like direct children of the element’s parent, ignoring the element itself.

<div class="flex gap:20">
    <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 to create a block-level element that establishes a new block formatting context.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Use `flow-root` to clear floats.

<div class="flow-root">
    <img class="float:left" …/>
    <p>Lorem ipsum dolor sit amet… </p>
</div>
Use flow-root to clear floats

List Item

Use list-item to create a block that behave like a list item.

<div>
    <div class="list-item">01</div>
    <div class="list-item">02</div>
    <div class="list-item">03</div>
</div>

Hidden

Use hide to hide the element. The element is not rendered in the document.

<div class="flex gap:20">
    <div>01</div>
    <div class="hide">02</div>
    <div>03</div>
</div>

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="display:block:hover display:block@sm display:block@dark display:block@print">…</div>