I am the default
My max-width is based on the screen size and the $container-max-width values:
$container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1202px );
I am the wider variant of the
My max-width is an arbitrary
1472px. At smaller sizes it seems like I fill the space.
I am the “fill” variant of the
My max-width is 100% of my containing element
Wherever possible, we try to use the flexibility of CSS flexbox for layout. As many components as possible are built with flex.
If you’re unfamiliar with flexbox and how it works, this CSS Tricks flexbox guide is a great resource.
We use Bootstrap 4 as a foundation to provide a complete suite of flexbox utilities and structure.
As we build out a stronger grid, we will begin to provide more classes like the below
Creates a default flex container and counteracts left and right padding inside of a
make-row() mixin to add this to any style.