Link

Grid

Primer Fluid extends upon the Grid module from Primer proper with a few utilities that address some needs for marketing as well as fluid scaling for all existing utitilies that otherwise use px values.

Max-width columns

Often there are cases where you want a grid column to have a maximum width that will stay constant until the viewport reaches that width. In Primer Fluid there are new utilities to address this need.

Max column widths are based on the column when at the xl container width (1280px). For example, a column with the col-6-max class applied will have a max-width of 40.5rem / 648px and will scale once the viewport reaches that width. Max-width column utilities are currently available for sizes col-5-max - col-10-max.

Gutters

You can use fluid gutter styles or fluid padding utilities to create gutters. You can use the default gutter style, gutter-fluid, or either of its modifiers, gutter-condensed-fluid or gutter-spacious-fluid.

Class Gutter width: rem Gutter width: pixels
gutter-fluid 2rem 32px
gutter-condensed-fluid 1rem 16px
gutter-spacious-fluid 3rem 48px

Gutter styles also support responsive breakpoint modifiers. Gutter styles add padding to the left and right side of each column and apply a negative margin to the container to ensure content inside each column lines up with content outside of the grid.

.col-md-3-fluid
.col-md-3-fluid
.col-md-3-fluid
.col-md-3-fluid