7.8 KiB
| extends | title | description |
|---|---|---|
| _layouts.documentation | Grids | Examples of building grid layouts with Tailwind CSS. |
Tailwind doesn't include purpose-built grid classes out of the box, but grid layouts are simple to build using the existing Flexbox and width utilities.
Basic Grids
Use the existing Flexbox and percentage width utilities to construct basic grids.
@component('_partials.code-sample', ['lang' => 'html'])
Responsive Grids
Use the responsive variants of the width utilities to build responsive grid layouts.
@component('_partials.responsive-code-sample') @slot('none')
Mixed Column Sizes
Mix different percentage width utilities to build mixed size grids.
@component('_partials.code-sample', ['lang' => 'html'])
Wrapping Columns
Add flex-wrap to your column container to allow columns to wrap when they run out of room.
@component('_partials.code-sample', ['lang' => 'html'])
Column Spacing
Add a negative horizontal margin like -mx-2 to your column container and an equal horizontal padding like px-2 to each column to add gutters.
@component('_partials.code-sample', ['lang' => 'html'])
Automatic Column Widths
Use flex-1 instead of an explicit width on your columns to have them size automatically to fill the row.
@component('_partials.code-sample', ['lang' => 'html'])
Column Order
Use flex-reverse to reverse column order. Useful for two-column responsive layouts where the column on right should appear first on smaller screens.
@component('_partials.code-sample', ['lang' => 'html'])
Simple Offsets
Use auto margin utilities like ml-auto and mr-auto to offset columns in a row.
@component('_partials.code-sample', ['lang' => 'html'])