Grid

Grid

Use grid to create a grid container.

CSS

Inline Grid

Use inline-grid to create an inline grid container.

CSS

Grid Template Columns

Utilities for specifying the columns in a grid layout.

1
2
3
4
5
6
9
12
none
[1fr,2fr]
[100px,1fr,min-content]
CSS
Customizing
windi.config.js
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.

1
2
3
4
5
6
9
12
none
[1fr,2fr]
[100px,1fr,min-content]
CSS
Customizing
windi.config.js
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.

auto
span-full
span-1
span-2
span-3
span-4
span-5
span-6
span-7
span-8
span-9
span-10
span-11
span-12
span-13
span-14
span-15
CSS
Customizing
windi.config.js
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.

auto
span-full
span-1
span-2
span-3
span-4
span-5
span-6
span-7
span-8
span-9
span-10
span-11
span-12
span-13
span-14
span-15
CSS
Customizing
windi.config.js
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.

auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CSS
Customizing
windi.config.js
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.

auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CSS
Customizing
windi.config.js
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.

auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CSS
Customizing
windi.config.js
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.

auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CSS
Customizing
windi.config.js
export default {
  theme: {
    extend: {
      gridRowEnd: {
        last: '20',
      },
    },
  },
}

Grid Auto Flow

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

row
col
row-dense
col-dense
CSS

Grid Auto Columns

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

auto
min
max
fr
CSS
Customizing
windi.config.js
export default {
  theme: {
    extend: {
      gridAutoColumns: {
        '2fr': 'minmax(0, 2fr)',
      },
    },
  },
}

Grid Auto Rows

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

auto
min
max
fr
CSS
Customizing
windi.config.js
export default {
  theme: {
    extend: {
      gridAutoRows: {
        '2fr': 'minmax(0, 2fr)',
      },
    },
  },
}

Gap

Utilities for controlling gutters between grid rows and columns.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS
Customizing

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

windi.config.js
export default {
  theme: {
    extend: {
      spacing: {
        lg: '18rem',
      },
    },
  },
}

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

windi.config.js
export default {
  theme: {
    extend: {
      gap: {
        sm: '2.75rem',
      },
    },
  },
}

Gap X

Utilities for controlling gutters between grid columns.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS

Gap Y

Utilities for controlling gutters between grid rows.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS