Grid Layouts - The University of Pennsylvania Component Guide
Overview
We've provided an extendable 2, 3 & 4 column grid layout that can be used anywhere on the website. The layout code can contain any type of content that may be needed. The columns do not start until the screen sizes is 1024 pixels or larger.
Column Layouts
The example below shows you only need a handful of divs to achieve the desired layouts. The outer most div needs a class of layout as well as the modifier class that determines the column widths; in the example that is layout--50-50.
The child div of layout needs at minimum a class of layout__flex. In addition a class of contain is usually added to keep the content a max-width of 1,275 pixels and centered on the screen. Two additional modifer classes can also be added here if needed. First is layout__flex--align-items-center which sets align-items:center. Second is layout__flex--justify-between which sets justify-content:spacebetween.
We only included the flex layout modifiers that we use regularly. Additoinal modifers can be added to the SCSS file if needed. We would recommend if complex flex layouts are needed to write custom code as needed.
The remaining divs are inside of the layout__flex div. They need to have a class of layout__column. Inside of those divs you can hae an content that is needed.
2 Column Example
3 Column Example
4 Column Example
Adding Additional Layouts and modifiers
Adding or removing layouts is very easy, open _layout.scss currently found in /components/layout/_layout.scss. There are 3 Sass maps set up for the 2, 3 and 4 columns respectively. You just need to add to the map to generate the new class needed.
As shown in the code example below you provide a name, which follows the BEM modifer naming convention, followed by the desired widths of the columns.
Additional modifier classes can also be added to this file if desired.