Skip to main content

Grids

Helper classes for grids and layouts.

Examples

Layout container

Layout class to set the maximum width for page content.

Max width 1000px

<div class="layoutContainer">...</div>

Layout container with overflow

Adding the --visible modifier sets overflow property to visible.

Max width 1000px with visible overflow

<div class="layoutContainer layoutContainer--visible">...</div>

Article layout container

Indents grid columns by 1 either side when screen size is tablet and up.

Sometimes it is necessary to add page specific styling. Typically I set a page class. In the context of an SPA (Single Page Application) such as Blazor it is not as straight forward. Here is one solution.

<div class="articleLayoutContainer">...</div>

Container

Grid Container. Adds a clear fix and sets box-sizing to border-box

<div class="container">...</div>