tailwindcss/docs/source/grid.md

extends	title
_layouts.markdown	Grid

Grid

Basic grid example:

.md:w-1/3

.md:w-1/3

.md:w-1/3

Columns don't need to fill a row:

.md:w-1/4

.md:w-1/4

.md:w-1/4

Columns can be different widths:

.md:w-1/4

.md:w-1/2

.md:w-1/4

Rows can overflow and wrap:

.md:w-1/3

.md:w-1/3

.md:w-1/3

.md:w-1/3

.md:w-1/3

Column widths can be automatic:

.md:flex-fill

.md:flex-fill

.md:flex-fill

.md:flex-fill

.md:flex-fill

Fixed width columns are still respected even if a smaller screen has auto column widths:

.flex-fill

.md:w-1/6

.md:flex-none

.flex-fill

.md:w-1/6

.md:flex-none

.flex-fill

.md:w-1/6

.md:flex-none

.flex-fill

.md:w-1/6

.md:flex-none

.flex-fill

.md:w-1/6

.md:flex-none

Use margin auto utilities to accomplish offsets:

.md:w-1/3

.md:ml-auto

.md:w-1/6

.md:mr-auto