Responsive grid systems are used to adjust our screens to fit within the available screen space. Rather than designing to specific screen sizes, responsive design is a fluid approach that makes the most of available screen space on any device.

 

 

Principles

Fluid: Percentage-based calculations are used instead of pixels.

Responsive: Images and content scale for optimal placement on any device or screen size.

Breakpoints: Queries are used to alter the layout at various breakpoints in the design.

Simplify: Non-essential content is hidden to improve the user experience.

Navigation: Extensive menus use techniques designed for smaller screen resolutions.

Container: To show how the grid is always fluid and percentage based, but the container can be either fixed or fluid on a per-breakpoint basis.

 

Responsive grid basics

The IDS responsive grid v2.0 is based primarily on the Bootstrap v4 grid system and our 4-pixel atomic grid with adjustments in margins and breakpoints intended to support product needs.

 

Outer padding around entire grid

The grid itself has some outer padding on its far left and right edges. The outer padding is as follows:

  1. 16px base from xxs to sm
  2. 20px alternate from md to lg
  3. 40px wide from xl to xxxl

 

Gutters between columns

The interior of the grid is separated by gutters between the columns. These gutters change based on a breakpoint as follows:

  1. 16px gutters from xxs to sm
  2. 20px gutters from md to xxxl

Breakpoints

Name  Breakpoints at this pixel
XXS 320
XS 480
SM 768
MD 1024
LG 1200
XL 1440
XXL 1680
XXXL 1920

 

 

Fluid vs fixed width

Responsive design is grounded in fluidity to make the most of the screen space of the device with which your page is being viewed. However, in some cases (e.g., marketing content) you may prefer to employ greater control of the layout of the page to achieve a more constrained and predictable layout. The IDS responsive grid v2.0 allows for this by adding fixed capabilities to the L (large) and XL (extra large) breakpoints.

 

View an interactive demo of the difference between Fluid and Fixed grids 

Fluid

Fluid means that column widths will continuously increase/decrease in size as the viewing area changes. Gutters and margins remain constant in size.

 

“A fluid container will stretch to the outer boundaries of its outermost parent. Often, this is the browser, but in cases where a fluid grid is inside of a container between the browser and itself, it can still be fluid and 100% the width of its parent, but maybe not the browser.”

Fixed

Fixed means that at a given breakpoint, columns sizes will become fixed until the next breakpoint is reached in the viewing area. Gutters and margins also remain constant in fixed mode.

Max widths

We define the maximum width for the grid at each breakpoint. This is defined as the maximum width that the 12 columns and dividing gutters can become at any given breakpoint. The margins are not included in this calculated constraint.

 

XXS / XS / S L XL  XXL
Fluid

100%

Fluid

100%

Fluid

100%

Fluid

100%

Fluid

100%

Fixed w/o sidebar

984px

Fixed w/o sidebar

1160px

Fixed w/o sidebar

1400px

Fixed w/o sidebar

1880px

Fixed w/ sidebar

820px

Fixed w/ sidebar

996px

Fixed w/ sidebar

1236px

Fixed w/ sidebar

1716px

Flexible

Configurable elements and attributes with pre-defined styling parameters.

 

M L XL XXL

Margins

20px, flex 20px increments

Margins

20px, flex 20px increments

Margins

20px, flex 20px increments

Margins

20px, flex 20px increments

Behavior

Fixed or Fluid

Behavior

Fixed or Fluid

Behavior

Fixed or Fluid

Behavior

Fixed or Fluid

Creating layout

We’re currently ironing through easier instructions to help you get started in the meantime please use this Grid calculator

  • Was this Helpful?
  •