Use the existing and percentage width utilities to construct basic grids.

Responsive Grids

Use the responsive variants of the width utilities to build responsive grid layouts.

all

sm

lg

xl

Mix different percentage width utilities to build mixed size grids.

Wrapping Columns

Add to your column container to allow columns to wrap when they run out of room.

Add a negative horizontal margin like -mx-2 to your column container and an equal horizontal padding like to each column to add gutters.

To prevent horizontal scrolling in full width layouts, add overflow-hidden to another parent container, or compensate for the negative margin with matching horizontal padding.

Automatic Column Widths

Use instead of an explicit width on your columns to have them size automatically to fill the row.

Use flex-row-reverse to reverse column order. Useful for two-column responsive layouts where the column on right should appear first on smaller screens.

Simple Offsets

Use auto margin utilities like and mr-auto to offset columns in a row.