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',
      },
    },
  },
}

</Customizing>

Grid Template Rows

Utilities for specifying the rows in a grid layout.

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

</Customizing>

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',
      },
    },
  },
}

</Customizing>

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',
      },
    },
  },
}

</Customizing>

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',
      },
    },
  },
}

</Customizing>

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',
      },
    },
  },
}

</Customizing>

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',
      },
    },
  },
}

</Customizing>

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',
      },
    },
  },
}

</Customizing>

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)',
      },
    },
  },
}

</Customizing>

Grid Auto Rows

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

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

</Customizing>

Gap

Utilities for controlling gutters between grid rows and columns.

You can customize the global spacing scale in the theme.spacing or theme.extend.spacing sections of your windi.config.js file:

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

To customize the gap scale separately, use the gap section of your Tailwind theme config.

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

</Customizing>

Gap X

Utilities for controlling gutters between grid columns.

Gap Y

Utilities for controlling gutters between grid rows.