Display

Apply display properties of an element

Classes

Class	Properties
.inline	display: inline;
.block	display: block;
.inline-block	display: inline-block;
.grid	display: grid;
.inline-grid	display: inline-grid;
.flex	display: flex;
.inline-flex	display: inline-flex;
.table	display: table;
.table-row	display: table-row;
.table-cell	display: table-cell;
.table-caption	display: table-caption;
.table-column	display: table-column;
.table-column-group	display: table-column-group;
.table-footer-group	display: table-footer-group;
.table-header-group	display: table-header-group;
.table-row-group	display: table-row-group;
.display-none	display: none;

.inline

Sets the display property to inline.

xxxxxxxxxx
 
<div class="bg-gray-1">
  <div class="inline p-4 bg-gray-2">1</div>
  <div class="inline p-4 bg-gray-3">2</div>
  <div class="inline p-4 bg-gray-2">3</div>
  <div class="inline p-4 bg-gray-3">4</div>
</div>

.block

Sets the display property to block.

xxxxxxxxxx
 
<div class="p-4 text-center bg-gray-1">
  <span class="block p-4 bg-gray-2">1</span>
  <span class="block p-4 bg-gray-3">2</span>
  <span class="block p-4 bg-gray-2">3</span>
  <span class="block p-4 bg-gray-3">4</span>
</div>

1 2 3 4

.inline-block

Sets the display property to inline-block.

xxxxxxxxxx
 
<div class="p-4 bg-gray-1">
  <div class="inline-block p-4 bg-gray-2">1</div>
  <div class="inline-block p-4 bg-gray-3">2</div>
  <div class="inline-block p-4 bg-gray-2">3</div>
  <div class="inline-block p-4 bg-gray-3">4</div>
</div>

.flex

Sets the display property to flex.

xxxxxxxxxx
 
<div class="flex p-4 text-center bg-gray-1">
  <span class="flex-grow m-2 p-4 bg-gray-2">1</span>
  <span class="flex-grow m-2 p-4 bg-gray-3">2</span>
  <span class="flex-grow m-2 p-4 bg-gray-2">3</span>
  <span class="flex-grow m-2 p-4 bg-gray-3">4</span>
</div>

1 2 3 4

.inline-flex

Sets the display property to inline-flex.

xxxxxxxxxx
 
<div class="inline-flex p-4 bg-gray-1">
  <div class="p-4 bg-gray-2">1</div>
  <div class="p-4 bg-gray-3">2</div>
  <div class="p-4 bg-gray-2">3</div>
  <div class="p-4 bg-gray-3">4</div>
</div>

.grid

Sets the display property to grid.

xxxxxxxxxx
 
<div class="grid columns-3 p-4 text-center bg-gray-1">
  <span class="p-4 bg-gray-2">1</span>
  <span class="p-4 bg-gray-3">2</span>
  <span class="p-4 bg-gray-2">3</span>
  <span class="p-4 bg-gray-3">4</span>
  <span class="p-4 bg-gray-2">5</span>
  <span class="p-4 bg-gray-3">6</span>
</div>

1 2 3 4 5 6

.inline-grid

Sets the display property to inline-grid.

xxxxxxxxxx
 
<div class="inline-grid columns-3 p-4 bg-gray-1">
  <div class="p-4 bg-gray-2">1</div>
  <div class="p-4 bg-gray-3">2</div>
  <div class="p-4 bg-gray-2">3</div>
  <div class="p-4 bg-gray-3">4</div>
  <span class="p-4 bg-gray-2">5</span>
  <span class="p-4 bg-gray-3">6</span>
</div>

5 6

.display-none

Sets the display property to none.

xxxxxxxxxx
 
<div class="p-4 text-center bg-gray-1">
  <div class="p-4 bg-gray-2">1</div>
  <div class="display-none p-4 bg-gray-3">2</div>
  <div class="display-none p-4 bg-gray-2">3</div>
  <div class="p-4 bg-gray-3">4</div>
</div>