Grid #

Grid #

Use grid to create a grid container.

Inline Grid #

Use inline-grid to create an inline grid container.

Grid Template Columns #

Utilities for specifying the columns in a grid layout.

export default {
  theme: {
    extend: {
      gridTemplateColumns: {
        nt: 'repeat(16, minmax(0, 1fr))',
        footer: '200px minmax(900px, 1fr) 100px',
      },
    },
  },
}

Grid Template Rows #

Utilities for specifying the rows in a grid layout.

export default {
  theme: {
    extend: {
      gridTemplateRows: {
        layout: '200px minmax(900px, 1fr) 100px',
      },
    },
  },
}

Grid Column Span #

Utilities for specifying the column size of an element in a grid layout.

export default {
  theme: {
    extend: {
      gridColumn: {
        'span-16': 'span 16 / span 16',
      },
    },
  },
}

Grid Row Span #

Utilities for specifying the row size of an element in a grid layout.

export default {
  theme: {
    extend: {
      gridRow: {
        'span-16': 'span 16 / span 16',
      },
    },
  },
}

Grid Column Start #

Utilities to make an element start at the nth grid line. These utilities should be combined with the col-end or col-span utilities to span a specific number of columns.

export default {
  theme: {
    extend: {
      gridColumnStart: {
        first: '1',
      },
    },
  },
}

Grid Column End #

Utilities to make an element end at the nth grid line. These utilities should be combined with the col-start or col-span utilities to span a specific number of columns.

export default {
  theme: {
    extend: {
      gridColumnEnd: {
        last: '20',
      },
    },
  },
}

Grid Row Start #

Utilities to make an element start at the nth grid line. These utilities should be combined with the row-end or row-span utilities to span a specific number of rows.

export default {
  theme: {
    extend: {
      gridRowStart: {
        first: '1',
      },
    },
  },
}

Grid Row End #

Utilities to make an element end at the nth grid line. These utilities should be combined with the row-start or row-span utilities to span a specific number of rows.

export default {
  theme: {
    extend: {
      gridRowEnd: {
        last: '20',
      },
    },
  },
}

Grid Auto Flow #

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

Grid Auto Columns #

Utilities for controlling the size of implicitly-created grid columns.

export default {
  theme: {
    extend: {
      gridAutoColumns: {
        '2fr': 'minmax(0, 2fr)',
      },
    },
  },
}

Grid Auto Rows #

Utilities for controlling the size of implicitly-created grid rows.

export default {
  theme: {
    extend: {
      gridAutoRows: {
        '2fr': 'minmax(0, 2fr)',
      },
    },
  },
}

Gap #

Utilities for controlling gutters between grid rows and columns.

export default {
  theme: {
    extend: {
      spacing: {
        lg: '18rem',
      },
    },
  },
}

export default {
  theme: {
    extend: {
      gap: {
        sm: '2.75rem',
      },
    },
  },
}

Gap X #

Utilities for controlling gutters between grid columns.

Gap Y #

Utilities for controlling gutters between grid rows.