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
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
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,
|Class||Gutter width: rem||Gutter width: pixels|
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.