tailwindcss/docs/source/grid.md

extends	title
_layouts.markdown	Grid

Grid

Basic grid example:

.flex.flex-wrap

.md:w-1/3

.md:w-1/3

.md:w-1/3

Columns don't need to fill a row:

.flex.flex-wrap

.md:w-1/4

.md:w-1/4

.md:w-1/4

Columns can be different widths:

.flex.flex-wrap

.md:w-1/4

.md:w-1/2

.md:w-1/4

Rows can overflow and wrap:

.flex.flex-wrap

.md:w-1/3

.md:w-1/3

.md:w-1/3

.md:w-1/3

.md:w-1/3

Columns can have gutters:

.flex.flex-wrap.pull-x-4

.w-full

.md:w-1/3

.px-4

.w-full

.md:w-1/3

.px-4

.w-full

.md:w-1/3

.px-4

Column widths can be automatic:

.flex.flex-wrap

.w-1/4

.md:flex-1

.md:w-auto

.w-1/4

.md:flex-1

.md:w-auto

.w-1/4

.md:flex-1

.md:w-auto

.w-1/4

.md:flex-1

.md:w-auto

.w-1/4

.md:flex-1

.md:w-auto

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

.flex.flex-wrap

.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:

.flex.flex-wrap

.md:w-1/3

.md:ml-auto

.md:w-1/6

.md:mr-auto