Layouts

• Add the class container to get boxed division
• Add the class container-narrow to get a narrower boxed division
• Add the class container-fluid to get a wide division
• Add the class container-half-fluid to get a wide division but on screens bigger than 1200px max-width will be 85%
• Add no classes to get full width division

Use the code below to get a page layout suits your needs

Spacing & Layout Utilities

These utilities help you create consistent spacing between elements without writing custom CSS. They work with any HTML structure and are designed for common layout patterns such as cards, grids, articles, navigation, and content sections.

Child Padding

• Add the class child-padding to apply the spacing defined by --child-padding to every direct child.
• Add the class child-padding-1 for small padding on every direct child.
• Add the class child-padding-2 for medium padding on every direct child.
• Add the class child-padding-3 for large padding on every direct child.
• Add the class child-padding-4 for extra large padding on every direct child.

Use these classes when all direct children should have equal internal spacing, such as cards, columns, feature boxes, or dashboard widgets.

Gap Utilities

• Add the class gap to apply the default gap between Flexbox or Grid items.
• Add the class gap-2 for medium spacing.
• Add the class gap-3 for large spacing.
• Add the class gap-4 for extra large spacing.

Gap utilities should be used only on Flexbox or CSS Grid containers. Unlike margins, they do not add spacing around the outer edges of the container.

Child Margin

• Add the class child-margin to apply margins to every direct child.
• Add the class child-margin-2 for medium margins.
• Add the class child-margin-3 for large margins.
• Add the class child-margin-4 for extra large margins.

These utilities are useful for regular block layouts, nested content, legacy layouts, or when spacing should remain outside each child element instead of using Flexbox/Grid gaps.

Cluster

• Add the class cluster to create a horizontal Flexbox layout.
• Items automatically wrap onto new lines when there is not enough horizontal space.
• Items are vertically centered by default.
• Combine with the gap utilities to control spacing between items.

Cluster is ideal for button groups, navigation links, badges, chips, tags, icons, and other collections of items that should wrap naturally.

Flow Utilities

• Add the class flow to use the spacing defined by --layout-flow.
• Add the class flow-1 for small vertical spacing between direct children.
• Add the class flow-2 for medium vertical spacing.
• Add the class flow-3 for large vertical spacing.
• Add the class flow-4 for extra large vertical spacing.

Flow utilities automatically add vertical spacing only between adjacent children. No spacing is added before the first child or after the last child.

Content Flow

• article, aside, details, and blockquote automatically use the --content-flow variable.
• Set --content-flow once to control the default spacing between paragraphs, headings, lists, images, and other content elements.
• No additional utility classes are required for these semantic elements.

This provides consistent typography spacing throughout articles and long-form content while keeping the HTML clean.

Layout Variables

• --child-padding controls the default spacing used by the child-padding class.
• --layout-flow controls the spacing used by the flow utility. It also applys on body and main.
• --content-flow controls the default spacing inside article, aside, details, and blockquote.

Changing these variables allows you to adjust spacing across an entire page or component without modifying individual classes.

Use the code below to create layouts with consistent spacing using these utilities.