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.