Class Reference
Layout
Class Reference
Layout
Display, flexbox, grid, alignment and responsive visibility.
How to use
Start with flex or grid. Add direction, columns, alignment and gap classes to express the layout. Avoid competing classes that set the same property at the same breakpoint.
Responsive behavior
Tablet and mobile suffixes apply inside their media queries. The unsuffixed class supplies the base layout; narrower breakpoint rules override it at its named breakpoint.
Visual reference
Examples use the installed class styles and your design variables. Each preview includes the context needed to show the class behavior; responsive examples follow the browser width. Guide: tinted area = layout container; blue tiles = items; dashed lines = container and grid-track boundaries.
Before
After
The surrounding elements show whether the example occupies its own line.
Before
After
The surrounding elements show whether the example occupies its own line.
Before
After
The surrounding elements show whether the example occupies its own line.
Before
After
The surrounding elements show whether the example occupies its own line.
Before
After
The surrounding elements show whether the example occupies its own line.
Before
After
The surrounding elements show whether the example occupies its own line.
Item 2 is hidden; items 1 and 3 remain visible.
The numbered items show the flow direction.
The numbered items show the flow direction.
The numbered items show the flow direction.
The numbered items show the flow direction.
The same six items use equal starting widths. Wrap creates more lines; nowrap keeps one line and allows shrinking.
The same six items use equal starting widths. Wrap creates more lines; nowrap keeps one line and allows shrinking.
The same six items use equal starting widths. Wrap creates more lines; nowrap keeps one line and allows shrinking.
All three items start at one quarter of the available width. Only item 2 carries the class.
All three items start at one quarter of the available width. Only item 2 carries the class.
All three items start at 50% of the container width, creating a need to shrink. Only item 2 carries the class.
All three items start at 50% of the container width, creating a need to shrink. Only item 2 carries the class.
Only item 2 carries the class. The other items start at one quarter of the available width; wrapping reveals the target’s basis.
Only item 2 carries the class. The other items start at one quarter of the available width; wrapping reveals the target’s basis.
Only item 2 carries the class. The other items start at one quarter of the available width; wrapping reveals the target’s basis.
Only item 2 carries the class. The other items start at one quarter of the available width; wrapping reveals the target’s basis.
Only item 2 carries the class. The other items start at one quarter of the available width; wrapping reveals the target’s basis.
Items start at 20% of the container width, leaving free space to show horizontal distribution.
Items start at 20% of the container width, leaving free space to show horizontal distribution.
Items start at 20% of the container width, leaving free space to show horizontal distribution.
Items start at 20% of the container width, leaving free space to show horizontal distribution.
Items start at 20% of the container width, leaving free space to show horizontal distribution.
Items start at 20% of the container width, leaving free space to show horizontal distribution.
The container is 180px tall. Different item heights make cross-axis alignment visible.
The container is 180px tall. Different item heights make cross-axis alignment visible.
The container is 180px tall. Different item heights make cross-axis alignment visible.
The container is 180px tall. Items stretch to the available height.
Different text sizes share the same text baseline; dashed guides mark the baseline.
Wrapping items inside a taller container make line distribution visible.
Wrapping items inside a taller container make line distribution visible.
Wrapping items inside a taller container make line distribution visible.
Wrapping items inside a taller container make line distribution visible.
Wrapping items inside a taller container make line distribution visible.
Wrapping items inside a taller container make line distribution visible.
Wrapping items inside a taller container make line distribution visible.
Only item 2 carries this class. Items 1 and 3 keep their reference alignment.
Only item 2 carries this class. Items 1 and 3 keep their reference alignment.
Only item 2 carries this class. Items 1 and 3 keep their reference alignment.
Only item 2 carries this class. Items 1 and 3 keep their reference alignment.
Only item 2 carries this class. Items 1 and 3 keep their reference alignment.
Only item 2 carries this class. Item 1 supplies the reference text baseline.
Each tile sits inside an equal grid track; smaller tiles reveal start, center and end alignment.
Each tile sits inside an equal grid track; smaller tiles reveal start, center and end alignment.
Each tile sits inside an equal grid track; smaller tiles reveal start, center and end alignment.
Each tile sits inside an equal grid track; smaller tiles reveal start, center and end alignment.
Different item heights make vertical alignment within grid tracks visible.
Different item heights make vertical alignment within grid tracks visible.
Equal grid tracks fill the available width. Numbered tiles show the column count.
Equal grid tracks fill the available width. Numbered tiles show the column count.
Equal grid tracks fill the available width. Numbered tiles show the column count.
Equal grid tracks fill the available width. Numbered tiles show the column count.
Equal grid tracks fill the available width. Numbered tiles show the column count.
Equal grid tracks fill the available width. Numbered tiles show the column count.
Item 2 is hidden above 1024px and visible at 1024px or below.
Item 2 is hidden above 767px and visible at 767px or below.
The frame is at least 240px tall. The image fills that height on desktop; at 1024px or below, it uses its natural aspect ratio.
Four equal grid tracks. Only item 2 carries the span class; tile borders show its occupied area.
Four equal grid tracks. Only item 2 carries the span class; tile borders show its occupied area.
Four equal grid tracks. Only item 2 carries the span class; tile borders show its occupied area.
Four equal grid tracks. Only item 2 carries the span class; tile borders show its occupied area.
Four equal grid tracks. Only item 2 carries the span class; tile borders show its occupied area.
Only item 2 carries the class; the numbers show its position after ordering.
Only item 2 carries the class; the numbers show its position after ordering.
Only item 2 carries the class; the numbers show its position after ordering.
This reference grid changes from three columns to one at 1024px or below.
This reference grid changes from three columns to two at 1024px or below.
Item 2 moves first at 1024px or below.
Item 2 is visible above 1024px and hidden at 1024px or below.
The same three items switch from a row to a column at 767px or below.
Item 2 is visible above 767px and hidden at 767px or below.
This reference grid changes from three columns to one at 767px or below.