Grid
Requirements
Having a standard, reusable grid is essential to ensuring that websites are consistent and display appropriately for various resolutions and devices. This grid uses CSS Grid to allow us to harness new ways of designing our sites, with a Flexbox fall-back option for Internet Explorer.
| Device Type | Breakpoint | Minimum Width | Maximum Width | Layout Class | Gutter Width | Hidden Class |
|---|---|---|---|---|---|---|
| Desktops (Large) | 1280 | 1200 | None | .col-xl |
2em (20px) | .hidden-xl |
| Desktops (Standard) | 1024 | 960 | 1199 | .col-lg |
2em (20px) | .hidden-lg |
| Desktops (Small)/ Tablets (Landscape) | 768 | 720 | 959 | .col-md |
1.5em (15px) | .hidden-md |
| Tablets (Portrait)/ Phones (Landscape) | 480 | 420 | 719 | .col-sm |
1.5em (15px) | .hidden-sm |
| Phones (Portrait) | 0 | 0 | 419 | .col-xs |
1em (10px) | .hidden-xs |
- Columns-based: Uses a standard 12-column grid with customizable gutters
- Responsive: Resizes to fit any device (large desktops, standard laptops, tablets - portrait/landscape, large phones, small phones, etc)
- Breakpoints: Allows customization of breakpoints to accommodate various devices (1440px, 1200px, 960px, 720px, 420px, 320px)
- Media queries: Changes layout based on breakpoints (switch to 4 columns on desktop to 2 columns at tablet size)
- Layout classes: Uses layout classes to manually change layouts based on breakpoint (col-xl, col-lg, col-md, col-sm, col-xs, col-xxs)
- Flexible sizing: Uses relative units (em, rem, vh, vw) instead of fixed units
- Alignment: Provides options for vertical and horizontal alignment
- Nesting: Allows ability to create nested columns within a larger grid
- Variable widths: Allows one column to be fixed and the other column to grow/shrink based on screen width
- Flexible layouts: Allows the layout to adjust regardless of the number of columns
- Balanced heights: Bases column height on total row height so all columns are the same height
- Breakpoint-dependent classes: Uses classes to hide and show content based on breakpoint (hidden-xs, hidden-sm, hidden-md, hidden-lg, hidden-xl, visible-xs, visible-sm, visible-md, visible-lg, visible-xl)
- Printing: Adjusts visibility and allows separate layout for printing
- Satisfies accessibility requirements: Uses semantic HTML, does not reorder the grid, contains ability to display content specifically for screen readers, controls visibility in an accessible way
12-Column Grid
Uses a standard 12-column grid that resizes based on browser width. Resizes to fit any device (large desktops, standard laptops, tablets - portrait/landscape, large phones, small phones, etc).
Stacked to Horizontal
Using a single set of.col-* grid classes, you can create a default grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before
becoming horizontal on desktop (medium) devices. Place grid columns in any.gd.
Layout Classes
Customize your layouts based on device. Use the medium, small, and extra small device grid classes by adding.col-md-*, .col-sm-* or .col-xs-* to your columns. See the example below for a better idea of how it all works.
Simple Grids
In situations where you'd like just a simple multi-column layout (all two columns, all three columns, etc), you can wrap your columns inside a standard .gd container, with a .gd-col-* helper class. Columns will automatically resize based on screen resolution.
Flexible Layout Options
Use Flexbox to provide a greater variety of layout options.