Layouts

Display

Utilities for sets the display box type of an element.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
block	display: block
hidden	display: none
inline	display: inline
inline-block	display: inline-block
flex	display: flex
inline-flex	display: inline-flex

class	css
table	display: table
table-caption	display: table-caption
table-cell	display: table-cell
table-row	display: table-row
table-row-(group)	display: table-row-(group)
table-column	display: table-column
table-column-(group)	display: table-column-(group)
table-header-(group)	display: table-header-(group)
table-footer-(group)	display: table-footer-(group)

Usage

Set a block element that starts on a new line and takes up the full width.

1 2 3

<div class="block">
  ...
</div>

HTML

.dummy {
  @extend
    .block;
}

SCSS

Set the completely removed element.

1 3

<div class="hidden">
  ...
</div>

HTML

.dummy {
  @extend
    .hidden;
}

SCSS

Set an element as an inline. Any height and width properties will have no effect.

<div class="inline-block">
  ...
</div>

HTML

.dummy {
  @extend
    .inline-block;
}

SCSS

Set an element as a block-level flex container.

<div class="flex">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

HTML

.dummy {
  @extend
    .flex;
}

SCSS

Set an element as an inline-level flex container.

<div class="inline-flex">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

HTML

.dummy {
  @extend
    .inline-flex;
}

SCSS

Set a complete set of table with table, table-row, table-cell, table-caption, table-column, table-column-group, table-header-group, table-row-group, and table-footer-group utilities.

Row-1 Cell-1

Row-1 Cell-2

Row-2 Cell-1

Row-2 Cell-2

<div class="table width-full">
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell">
        ...
      </div>
      <div class="table-cell">
        ...
      </div>
    </div>
    <div class="table-row">
      <div class="table-cell">
        ...
      </div>
      <div class="table-cell">
        ...
      </div>
    </div>
  </div>
</div>

HTML

.dummy-table {
  @extend
    .table,
    .width-full;
}
.dummy-table-group {
  @extend
    .table-row-group;
}
.dummy-table-row {
  @extend
    .table-row;
}
.dummy-table-cell {
  @extend
    .table-cell;
}

SCSS