Layout

This section serves as a central guide for arranging content consistently across products.

Grid and Breakpoints

Guidelines on how to structure pages using grids (e.g. 12-column grids), responsive breakpoints, and how layouts adapt across devices.

Grid Container

Our CSS framework defines a grid container with the class .grid-layout that uses a CSS grid. It creates columns dynamically using the variable ––grid-columns (defaulting to 12) and an inner gutter defined via ––inner-gutter.

For example, the rule:

ensures a flexible grid system where individual grid items can span columns (using classes like grid-col-span-12) as needed.

The custom utility .grid-layout class is the foundational grid container in our framework. It sets the element to use CSS Grid, and its main properties are:

It uses the variable for columns: grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);. This means it will create as many equal-width columns as specified by the --grid-columns variable (defaulting to 12), unless overridden by a more specific --container-grid-columns value.
It sets the gap between grid items using the –inner-gutter variable grid-gap: var(--inner-gutter);.

In practice, this class allows you to build flexible, responsive layouts that adjust based on your breakpoint settings and custom CSS tokens.

Breakpoints

Several media queries set custom CSS variables at different viewport widths. For instance, at min-width 750px, 900px, 1024px, 1280px, and even 2200px, the values for ––inner-gutter, ––outer-gutter, and ––grid-columns are updated. This makes it easy to adjust spacing and grid behavior responsively.

Below is a list of the available breakpoints along with the corresponding CSS variables that are updated at each threshold:

Container

The utility .container class uses these variables to calculate its width dynamically, subtracting outer gutter space from 100%. This ensures consistent alignment across the page.

The container rules here serve two primary purposes.

Calculate a centered container width that takes into account outer gutters.

The width is determined by subtracting twice the outer gutter value—resolved from the custom properties (first trying --breakout-container-outer-gutter, then --container-outer-gutter, and finally --outer-gutter if neither is set) —from the container’s full width (defaulting to 100%). This dynamic calculation lets you adjust spacing consistently across your layout.

Applied to direct children of the container

Resets the outer gutter variables (setting them to 0). This prevents nested elements from inheriting unwanted outer gutter spacing, ensuring that only the container itself applies the intended horizontal spacing.

Usage Examples

The provided code snippets show how to create multi-column layouts, adjust gutters, and override column spans at different breakpoints (for example, using classes like md:grid-col-span-4 or lg:grid-col-span-6).

Example 1 - Grid Layout Two Columns

Centered container section with a grid layout set to two columns spanning the full container width.

Column 1

This is the content for the first column. It takes up 50% of the container’s width, providing room for additional widgets or information.

Column 2

This is the content for the second column. It also spans 50% of the container, making the layout balanced and responsive.

Example 2 - Grid Layout Four Columns

Centered container section with a grid layout set to four columns spanning the full container width.

Column 1

This is the content for the first column. It takes up 25% of the container’s width, providing room for additional widgets or information.

Column 2

This is the content for the second column. It also spans 25% of the container, making the layout balanced and responsive.

Column 3

This is the content for the second column. It also spans 25% of the container, making the layout balanced and responsive.

Column 4

This is the content for the second column. It also spans 25% of the container, making the layout balanced and responsive.

Example 3 - Grid and Breakpoints

This snippet leverages responsive grid classes to update the layout at different breakpoints. By default, the grid is set to two columns via the class grid-cols-2, which means each grid item occupies 50% of the container’s width. At the md (medium) breakpoint and above, the grid switches to md:grid-cols-4 —resulting in a four-column layout where items can adjust. The first div item occupies 2 out of 4 columns (50% of the container) using the class grid-col-span-2. Additionally, a second grid section uses grid-cols-1 to span the full container width.

Item 1 (col-span 2)

This item occupies 2 out of 4 columns (50% of the container).

Item 2 (default span)

This item takes 1 column.

Item 3 (default span)

This item takes 1 column.

Horizontal

It spans 100% of the container, making the layout balanced and responsive.

Example 4 - Mixing Cols and Rows

This block spans 6 out of 12 columns (50% width), starting at column 4—so it covers the entire right half of the container.

This block spans 3 out of 12 columns (25% width) on the left, and extends down 3 rows—ideal for a sidebar or navigation.

This block also spans 3 out of 12 columns (25% width), positioned in columns 4–6.

Example 5 - Grid Gaps

A responsive grid that displays two, three, or four equally spaced boxes per row at small (grid-cols-2), medium (md:grid-cols-3), and large (lg:grid-cols-4) breakpoints, with vertical spacing via gap-y-16 and horizontal spacing via gap-x-gutter.

Div 1

Div 2

Div 3

Div 4

Customization Tokens

The default available CSS variables (––inner-gutter, ––outer-gutter, ––grid-columns, etc.) offered in the CSS framwork are:

Our grid system follows a hierarchical approach to ensure consistent, responsive layouts.

Centered container

It sets the overall width and outer gutters. Inside this container, a grid-layout establishes the grid structure using grid-cols classes that define how many columns are present, and media queries update variables like --inner-gutter, --outer-gutter, and --grid-columns at specific breakpoints for refined spacing.

Individual grid items

They can use grid-col-span-* classes to control how many of those columns they occupy.

graph TD
  A[Container]
  B[Grid Layout]
  C[Grid-cols-* Classes]
  D[Grid-col-span-* Classes]
  E[Breakpoints]
  F[Spacing Variables]
  G[Utility Classes]

  A --> B
  B --> C
  B --> D
  C --> E
  E --> F
  A --> G

Component	Description
Container	Centers content and sets the overall width and outer gutters using the container class.
Grid Layout	Establishes the grid structure within the container using the grid-layout class, defining the layout framework.
Grid-cols- Classes*	Define the number of equal-width columns in the grid container (e.g., grid-cols-2, grid-cols-4) and adjust responsively at breakpoints.
Grid-col-span- Classes*	Applied to individual grid items to specify how many columns they should span within the grid structure, allowing for flexible content sizing.
Breakpoints	Media queries update key CSS variables (like –inner-gutter, –outer-gutter, and –grid-columns) at various viewport widths (e.g., 750px, 900px, 1024px, etc.).
Spacing Variables	Custom properties (e.g., –inner-gutter, –outer-gutter, –grid-columns) control the spacing and column configuration consistently across the layout.
Utility Classes	Additional classes (e.g., mt-16, p-16, bg-dark) are used to fine-tune margins, padding, backgrounds, and other visual details across components.