Skip to content

Latest commit

 

History

History
12 lines (7 loc) · 779 Bytes

css.md

File metadata and controls

12 lines (7 loc) · 779 Bytes
Raw

CSS

Using the grid system

The CSS grid system in the website uses flexbox to achieve a 8-column layout, reflecting the 8-column grid in the logo system. It consists of two classes and a number of CSS variables.

To create a column layout:

  1. Import the grid.module.css file in your React component and add the .grid class to the element that needs to have columns.
  2. On the child elements that need to be shown in columns, use the .col class alongside a custom class that sets the flex-basis property using the CSS variables var(--col1) – var(--col8). You can code responsive designs by reassigning the var(--col1) – var(--col8) variables.

The .grid class can be used on either a .col element or on a child of a .col element for nested grids.