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

extends	title	description
_layouts.documentation	Grid	null

@include('_partials.work-in-progress-example')

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-grow

.md:w-1/6

.md:flex-none

.flex-grow

.md:w-1/6

.md:flex-none

.flex-grow

.md:w-1/6

.md:flex-none

.flex-grow

.md:w-1/6

.md:flex-none

.flex-grow

.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