Display

Syntax

Class
Properties
block
display: block;
contents
display: contents;
flex
display: flex;
flow-root
display: flow-root;
grid
display: grid;
hidden
display: none;
inline
display: inline;
inline-block
display: inline-block;
inline-flex
display: inline-flex;
inline-grid
display: inline-grid;
table
display: table;
table-caption
display: table-caption;
table-cell
display: table-cell;
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
display: table-row;
table-row-group
display: table-row-group;
<div class="t1 w-320 bg-c-white rounded-3 color-text p-16 shadow-4"> <div class="t1 block p-8 bg-c-blue-100">Block elements</div> <div class="t1 block p-8 bg-c-blue-200">create line breaks in the normal flow. They are full-width</div> <div class="t1 block p-8 bg-c-blue-300">by default.</div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Display block
t1 block
.t1.block { display: block; }
Display contents
t1 contents
.t1.contents { display: contents; }
Display flex
t1 flex
.t1.flex { display: flex; }
Display flow-root
t1 flow-root
.t1.flow-root { display: flow-root; }
Display grid
t1 grid
.t1.grid { display: grid; }
Display hidden
t1 hidden
.t1.hidden { display: none; }
Display inline
t1 inline
.t1.inline { display: inline; }
Display inline-block
t1 inline-block
.t1.inline-block { display: inline-block; }
Display inline-flex
t1 inline-flex
.t1.inline-flex { display: inline-flex; }
Display inline-grid
t1 inline-grid
.t1.inline-grid { display: inline-grid; }
Display table
t1 table
.t1.table { display: table; }
Display table-caption
t1 table-caption
.t1.table-caption { display: table-caption; }
Display table-cell
t1 table-cell
.t1.table-cell { display: table-cell; }
Display table-column
t1 table-column
.t1.table-column { display: table-column; }
Display table-column-group
t1 table-column-group
.t1.table-column-group { display: table-column-group; }
Display table-footer-group
t1 table-footer-group
.t1.table-footer-group { display: table-footer-group; }
Display table-header-group
t1 table-header-group
.t1.table-header-group { display: table-header-group; }
Display table-row
t1 table-row
.t1.table-row { display: table-row; }
Display table-row-group
t1 table-row-group
.t1.table-row-group { display: table-row-group; }