Display ​

Utilities for controlling the display box type of an element.

Flex ​

Use flex to create a block-level flex container.

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

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

Grid ​

Use grid to create a grid container.

<div class="grid">
  <!-- ... -->
</div>

<div class="grid">
  <!-- ... -->
</div>

Block ​

Use block to create a block-level element.

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

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

Hidden ​

Use hidden to set an element to display: none and remove it from the page layout

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

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

Table ​

Use the table, .table-row, .table-cell, .table-caption, .table-column, .table-column-group, .table-header-group, table-row-group, and .table-footer-group utilities to create elements that behave like their respective table elements.

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

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

Flow-Root ​

Use flow-root to create a block-level element with its own block formatting context.

<div class="flow-root">
  <!-- ... -->
</div>

<div class="flow-root">
  <!-- ... -->
</div>

Contents ​

Use contents to create a "phantom" container whose children act like direct children of the parent.

<div class="contents">
  <!-- ... -->
</div>

<div class="contents">
  <!-- ... -->
</div>

Inline ​

Use inline, inline-flex, inline-grid, inline-block, inline-table to create an inline element.

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

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

Responsive ​

To control the display property of an element at a specific breakpoint, add a {screen}: prefix to any existing display utility class. For example, use md:inline-flex to apply the inline-flex utility at only medium screen sizes and above.

<div class="flex md:inline-flex">
  <!-- ... -->
</div>

<div class="flex md:inline-flex">
  <!-- ... -->
</div>

For more information about Gridi responsive design features, check out the Responsive Design documentation.