Back to components

Grid

The If Design System includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. The grid comes with multiple tiers, one tier for each breakpoint (media query range).

.if.col-4--xs
.if.col-4--xs
.if.col-4--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-6--xs
.if.col-6--xs
.if.col-2--xs
.if.col-6--xs
.if.col-4--xs
Preview

Table of Contents

Edit this section, Opens in new window

Overview

Responsive UI

Responsive layouts in the If Design System should adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts and breakpoint details about how content reflows on different screens.

Breakpoints

For optimal user experience, If user interfaces should adapt layouts for the following breakpoint widths: 360px, 400px, 720px, 960px, 1200px, 1440px, 1920px, 2560px, 3200px and 3840px.

Edit this section, Opens in new window

Types

Standard fixed width grid

.if.col-4--xs
.if.col-4--xs
.if.col-4--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-6--xs
.if.col-6--xs
.if.col-2--xs
.if.col-6--xs
.if.col-4--xs
  1. Column
  2. Gutter

Fluid grid, fixed margins

The fluid grid comes with fixed margins, so that the main content container has a fluid width.

.if.col-4--xs
.if.col-4--xs
.if.col-4--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-6--xs
.if.col-6--xs
.if.col-2--xs
.if.col-6--xs
.if.col-4--xs

Full width grid

The full width grid takes 100% of the container, in any breakpoint.

.if.col-4--xs
.if.col-4--xs
.if.col-4--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-6--xs
.if.col-6--xs
.if.col-2--xs
.if.col-6--xs
.if.col-4--xs
  1. Column
  2. Gutter

Nested grid

.if.col-4--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs

Wider fixed grid

The wider fixed grid is a bit wider than the standard fixed grid. This allows for wider components, like the product matrix table with many products.

.if.col-4--xs
.if.col-4--xs
.if.col-4--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-6--xs
.if.col-6--xs
.if.col-2--xs
.if.col-6--xs
.if.col-4--xs
Edit this section, Opens in new window

Options

Mobile

XXS
≥22.5rem / 360px 		Extra small
≥25rem / 400px 		Smaller
≥45rem / 720px 		Small
≥60rem / 960px 		Medium
≥75rem / 1200px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Class postfix --xxs --xs --smlr- --sm- --md-
# of columns 12
Normal column width fluid fluid fluid fluid 44px
Normal gutter width 24px 32px 40px 40px 40px
Normal container width 100% 100% 100% 100% 968px
Fluid gutter width 24px 32px 40px 40px 40px
Fluid column width fluid fluid fluid fluid fluid
Fluid container width 100% 100% 100% 100% auto
Wide column width fluid fluid fluid fluid 48px
Wide gutter width 24px 32px 40px 40px 40px
Wide container width 100% 100% 100% 100% 1016px
Across (full width) column width fluid fluid fluid fluid fluid
Across (full width) gutter width 24px 32px 40px 40px 40px
Across (full width) container width 100% 100% 100% 100% 100%
Nestable Yes
Offsets No

Desktop

Large
≥90rem / 1440px 		Extra large
≥120rem / 1920px 		XXL
≥160rem / 2560px 		Huge
≥200rem / 3200px 		Huger
≥240rem / 3840px
Grid behavior Collapsed to start, horizontal above breakpoints
Class postfix --lg- --xl- --xxl- --huge- --xl-
# of columns 12
Normal column width 48px 60px 70px 70px 70px
Normal gutter width 40px 40px 40px 40px 40px
Normal container width 1016px 1160px 1280px 1280px 1280px
Fluid gutter width 40px 40px 40px 40px 40px
Fluid column width fluid fluid fluid fluid fluid
Fluid container width auto auto auto auto auto
Wide column width 60px 70px 68px 68px 68px
Wide gutter width 40px 40px 56px 56px 56px
Wide container width 1160px 1280px 1432px 1432px 1432px
Across (full width) column width fluid fluid fluid fluid fluid
Across (full width) gutter width 40px 40px 56px 56px 56px
Across (full width) container width 100% 100% 100% 100% 100%
Nestable Yes
Offsets No
Edit this section, Opens in new window
Contact us, Opens in new window