Grid Template Columns

Utilities for specifying the columns in a grid layout. .grid-cols-2, .grid-cols-3

            
            <div class="grid grid-cols-2">
              <-- ... -->
            </div>
            <div class="grid grid-cols-3">
              <-- ... -->
            </div>
            
          

Grid Template Rows

Utilities for specifying the rows in a grid layout. .grid-rows-2, .grid-rows-3

            
            <div class="grid grid-rows-2 grid-flow-col">
              <-- ... -->
            </div>
            <div class="grid grid-rows-3 grid-flow-col">
              <-- ... -->
            </div>
            
          

Grid Utilities

• Grid Gap

  The classes .gap-1, .gap-2 can be used to create mention both column and row gap.

  To specifiy row or column gap, use the .row-gap-{n} or .col-gap-{n} utility.

• Grid Item Span

  Use the .col-span-{n} utilities to make an element span n columns. (Max 3)

  Use the .row-span-{n} utilities to make an element span n rows. (Max 3)

• Grid Auto Flow

  Utilities for controlling how elements in a grid are auto-placed.

  .grid-auto-row .grid-auto-col .grid-auto-row-dense .grid-auto-col-dense

• Place Content

  Utilities for controlling how content is justified and aligned at the same time.

  .place-content-center .place-content-start .place-content-end .place-content-between .place-content-around .place-content-evenly .place-content-stretch

• Place Items

  Utilities for controlling how items are justified and aligned at the same time.

  .place-items-center .place-items-start .place-items-end .place-items-stretch

• Place Self

  Utilities for controlling how an individual item is justified and aligned at the same time.

  .place-self-auto .place-self-center .place-self-start .place-self-end .place-self-stretch