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.
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.
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.
The grid itself has some outer padding on its far left and right edges. The outer padding is as follows:
The interior of the grid is separated by gutters between the columns. These gutters change based on a breakpoint as follows:
Name | Breakpoints at this pixel |
XXS | 320 |
XS | 480 |
SM | 768 |
MD | 1024 |
LG | 1200 |
XL | 1440 |
XXL | 1680 |
XXXL | 1920 |
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 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 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.
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 | M | 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 |
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 |
We’re currently ironing through easier instructions to help you get started in the meantime please use this Grid calculator