Skip to content

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:

ClassDescription
d:bblock
d:n / hidenone
d:fflex
d:ggrid
d:lilist-item
ClassDescription
d:iinline
d:ibinline-block
d:ifinline-flex
d:iginline-grid
d:itinline-table
d:iliinline-list-item
ClassDescription
d:ttable
d:tctable-cell
d:trtable-row
d:tcltable-column
d:trgtable-row-group
d:tcgtable-column-group
d:tfgtable-footer-group
d:thgtable-header-group
d:tcptable-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

ClassDescription
d:fflex with gap
gap:0flex without gap
d:f:xflex (row) with gap
d:f:yflex (column) with gap
evenflex: 1
noneflex: 0
autoflex: auto
wrapflex-flow: wrap
reverseflex-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>
ClassDescription
grow:0flex-grow: 0
grow:1flex-grow: 1
grow:2flex-grow: 2
grow:3flex-grow: 3
grow:4flex-grow: 4
grow:5flex-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>
ClassDescription
shrink:0flex-shrink: 0
shrink:1flex-shrink: 1
shrink:2flex-shrink: 2
shrink:3flex-shrink: 3
shrink:4flex-shrink: 4
shrink:5flex-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>
ClassDescription
basis:0flex-basis: 0
basis:100flex-basis: 100%
basis:autoflex-basis: auto

Grid

ClassDescription
d:ggrid with gap
gap:0grid without gap
d:g:xgrid (column flow) with gap
d:g:ygrid (row flow) with gap
evengrid-auto: 1fr
wrapgrid-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

ClassDescription
order:-5order: -5
order:-4order: -4
order:-3order: -3
order:-2order: -2
order:-1order: -1
order:0order: 0
order:1order: 1
order:2order: 2
order:3order: 3
order:4order: 4
order:5order: 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>

Released under the MIT License