The FCDO Grid uses a 12-column flexbox layout system to create responsive page structures. It allows content to be arranged into columns that adapt across different screen sizes.

The grid is made up of three main building blocks:

• Container - controls the maximum width of page content and provides horizontal spacing.
• Row - creates a horizontal group of columns and manages spacing between them.
• Columns - define how much space content occupies within the 12-column grid.

Containers

Containers provide the structure for page content by controlling the maximum width and applying horizontal spacing.

Use fcdo-container for a responsive fixed-width container or fcdo-container-fluid when content should span the full available width.

Rows

Rows group columns together and manage the spacing between columns using gutters.

A row should only contain columns or nested rows within columns.

Columns

The grid is divided into 12 equal columns. Column classes define how many of these columns an element should occupy.

For example, fcdo-col-6 occupies half of the available row width, while fcdo-col-12 occupies the full width.

Responsive columns

Responsive classes allow layouts to change depending on screen size.

Add a breakpoint prefix to change the column width at different viewport sizes.

Prefix	Breakpoint
fcdo-col-sm	576px and above
fcdo-col-md	768px and above
fcdo-col-lg	992px and above
fcdo-col-xl	1200px and above
fcdo-col-xxl	1400px and above

Gutters

Gutters control the spacing between columns.

Use gutter classes to increase or decrease spacing while maintaining consistent alignment across layouts.

Available classes include:

• fcdo-g-0 to fcdo-g-5 - horizontal and vertical spacing
• fcdo-gx-0 to fcdo-gx-5 - horizontal spacing only
• fcdo-gy-0 to fcdo-gy-5 - vertical spacing only

Offsets

Offsets allow columns to be moved to the right by a specified number of columns.

Use offset classes when content needs additional spacing before it begins.

Column ordering

The grid supports changing the visual order of columns without changing the HTML structure.

Ordering classes can also be applied responsively using breakpoint prefixes.

Alignment

Alignment utilities allow rows and columns to be positioned horizontally or vertically.

Available utilities include:

• Horizontal alignment using fcdo-justify-content-*
• Vertical alignment using fcdo-align-items-*
• Individual column alignment using fcdo-align-self-*

Nesting

Columns can contain nested rows to create more complex layouts.

Nested grids should always remain inside a column to maintain correct spacing and alignment.

Best practice

• Use containers to create consistent page widths.
• Keep column structures simple and avoid unnecessary nesting.
• Use responsive classes to create layouts that work across devices.
• Use gutters instead of custom margins for spacing between columns.
• Ensure column widths do not exceed twelve columns within a row.

Breakpoints

Breakpoints define the screen sizes where the grid layout can change. The FCDO Grid uses a mobile-first approach, meaning layouts start from the smallest screen size and progressively adapt for larger screens.

Breakpoint classes apply from the specified width and above. For example, fcdo-col-md-6 applies at 768px and larger screen sizes.

Name	Prefix	Value	Description
Extra small	-	0px	Default layout for mobile devices.
Small	sm	576px	Larger mobile devices.
Medium	md	768px	Tablet devices.
Large	lg	992px	Desktop devices.
Extra large	xl	1200px	Large desktop screens.
Extra extra large	xxl	1400px	Wide desktop screens.

Sass variables

$fcdo-breakpoint-sm: 576px;
$fcdo-breakpoint-md: 768px;
$fcdo-breakpoint-lg: 992px;
$fcdo-breakpoint-xl: 1200px;
$fcdo-breakpoint-xxl: 1400px;

Example

<div class="fcdo-col-12 fcdo-col-md-6 fcdo-col-lg-4">
    Content
</div>

In this example:

• Below 768px: the column spans the full width.
• From 768px: the column spans 6 of 12 columns.
• From 992px: the column spans 4 of 12 columns.