Display
This section provides a comprehensive guide to the display utility classes. These utilities allow for precise control over the display property of HTML elements, facilitating various layout and visibility adjustments essential for modern web development. Each utility class corresponds to a specific CSS display property, enabling developers to quickly apply the desired styles without writing custom CSS.
CSS Classes
The display utilities are categorized based on the type of display behavior they control. Here’s a detailed breakdown of each category and the corresponding utility classes:
| Class | Description |
|---|---|
| d:b | block |
| d:n / hide | none |
| d:f | flex |
| d:g | grid |
| d:li | list-item |
| Class | Description |
|---|---|
| d:i | inline |
| d:ib | inline-block |
| d:if | inline-flex |
| d:ig | inline-grid |
| d:it | inline-table |
| d:ili | inline-list-item |
| Class | Description |
|---|---|
| d:t | table |
| d:tc | table-cell |
| d:tr | table-row |
| d:tcl | table-column |
| d:trg | table-row-group |
| d:tcg | table-column-group |
| d:tfg | table-footer-group |
| d:thg | table-header-group |
| d:tcp | table-caption |
Flexbox / Grid - Utilities
Flexbox utilities provide powerful alignment and distribution capabilities, while grid utilities enable complex grid layouts with ease. Below are the classes related to both flexbox and grid layout:
Flex
| Class | Description |
|---|---|
| d:f | flex with gap |
| gap:0 | flex without gap |
| d:f:x | flex (row) with gap |
| d:f:y | flex (column) with gap |
| even | flex: 1 |
| none | flex: 0 |
| auto | flex: auto |
| wrap | flex-flow: wrap |
| reverse | flex-flow: reverse |
X
Item 1
Item 2
html
<div class="d:f">
<div>Item 1</div>
<div>Item 2</div>
</div>gap:0
Item 1
Item 2
html
<div class="d:f gap:0">
<div>Item 1</div>
<div>Item 2</div>
</div>X even
Item 1
Item 2
html
<div class="d:f even">
<div>Item 1</div>
<div>Item 2</div>
</div>Y
Item 1
Item 2
html
<div class="d:f:y">
<div>Item 1</div>
<div>Item 2</div>
</div>Y even
Item 1
Item 2
Item 3
Item 4
Item 1
Item 2
Even 1
Even 2
html
<div class="d:f:y even">
<div>Item 1</div>
<div>Item 2</div>
</div>wrap
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
html
<div class="d:f wrap">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>none
None
Even 1
Even 2
html
<div class="d:f even">
<div class="flex:none">None</div>
<div>Even 1</div>
<div>Even 2</div>
</div>auto
Auto 1
Auto 2
html
<div class="d:f auto">
<div>Auto 1</div>
<div>Auto 2</div>
</div>reverse
Item 1
Item 2
Item 3
html
<div class="d:f reverse">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>grow
Item 1
Item 2
Item 3
html
<div class="d:f">
<div class="grow:0">Item 1</div>
<div class="grow:1">Item 2</div>
<div class="grow:2">Item 3</div>
</div>| Class | Description |
|---|---|
| grow:0 | flex-grow: 0 |
| grow:1 | flex-grow: 1 |
| grow:2 | flex-grow: 2 |
| grow:3 | flex-grow: 3 |
| grow:4 | flex-grow: 4 |
| grow:5 | flex-grow: 5 |
shrink
Item 1
Item 2
Item 3
html
<div class="d:f">
<div class="shrink:0">Item 1</div>
<div class="shrink:1">Item 2</div>
<div class="shrink:2">Item 3</div>
</div>| Class | Description |
|---|---|
| shrink:0 | flex-shrink: 0 |
| shrink:1 | flex-shrink: 1 |
| shrink:2 | flex-shrink: 2 |
| shrink:3 | flex-shrink: 3 |
| shrink:4 | flex-shrink: 4 |
| shrink:5 | flex-shrink: 5 |
basis
0
100%
Auto
0
Auto
100%
Auto
html
<div class="d:f">
<div class="basis:0">Basis 0</div>
<div class="basis:100">Basis 100%</div>
<div class="basis:auto">Basis auto</div>
</div>| Class | Description |
|---|---|
| basis:0 | flex-basis: 0 |
| basis:100 | flex-basis: 100% |
| basis:auto | flex-basis: auto |
Grid
| Class | Description |
|---|---|
| d:g | grid with gap |
| gap:0 | grid without gap |
| d:g:x | grid (column flow) with gap |
| d:g:y | grid (row flow) with gap |
| even | grid-auto: 1fr |
| wrap | grid-auto-flow: dense |
Item 1
Item 2
html
<div class="d:g">
<div>Item 1</div>
<div>Item 2</div>
</div>Item 1
Item 2
html
<div class="d:g gap:0">
<div>Item 1</div>
<div>Item 2</div>
</div>Item 1
Item 2
html
<div class="d:g even">
<div>Item 1</div>
<div>Item 2</div>
</div>Item 1
Item 2
html
<div class="d:f:y">
<div>Item 1</div>
<div>Item 2</div>
</div>Item 1
Item 2
Item 3
Item 4
Item 1
Item 2
Even 1
Even 2
html
<div class="d:g:y even">
<div>Item 1</div>
<div>Item 2</div>
</div>Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
html
<div class="d:g wrap">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>Order
| Class | Description |
|---|---|
| order:-5 | order: -5 |
| order:-4 | order: -4 |
| order:-3 | order: -3 |
| order:-2 | order: -2 |
| order:-1 | order: -1 |
| order:0 | order: 0 |
| order:1 | order: 1 |
| order:2 | order: 2 |
| order:3 | order: 3 |
| order:4 | order: 4 |
| order:5 | order: 5 |
Item 3
Item 1
Item -2
html
<div class="d:f">
<div class="order:3">Item 3</div>
<div class="order:1">Item 1</div>
<div class="order:-2">Item -2</div>
</div>Item 3
Item 1
Item -2
html
<div class="d:g">
<div class="order:3">Item 3</div>
<div class="order:1">Item 1</div>
<div class="order:-2">Item -2</div>
</div>