tailwindcss/docs/source/docs/grid.blade.md

extends	title
_layouts.documentation	Grid

Grid

Work in progress!

More detailed documentation is coming soon, but in the mean time here are some quick and dirty examples.

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