nitron Grid

Build layouts of all shapes and sizes.

Class	Properties
.container	Controls the overall width
.grid	Distributes the cells, sets gaps
.cell	Optional: Sets the width, contains the content

Basic definition

The grid consists of three elements: The parent .container controlling the overall width, the .grid to distribute the cells and set gaps, the .cell which contains the actual content.
Note 1: The css class .auto ensures that all cells occupy exactly the space they need.
Note 2: When using the default CSS Grid system, you also need to add the cell sizes, e.g. .half

One

Two

Three

Four

Sizing via parent container

With this method, the individual cells are distributed evenly via the parent .grid. You can easily control the responsive behaviour by adding semantic classes. E.g. full, half@sm, thirds@md.

One

Two

Three

Sizing via cells

This is the more classical approach, where the size definitions take place directly in the respective .cell. This method allows individual width specifications. E.g. 12, 7@lg

I'm 12 cells wide on mobile and 7 cells wide on large

I'm 12 cells wide on mobile and 5 cells wide on large

Row gaps

By adding .row-gaps to the parent .grid, each cell will get some vertical space.

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

Box 7

Box 8

Custom gaps

Define your custom gaps in 5-components/_grid.scss and add the equivalent css class (e.g. .gaps-small) to the .grid.

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

Box 7

Box 8

No gaps

Remove all gaps by adding .no-gaps to the parent .grid.

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

Box 7

Box 8

Full-width grid

By adding .full-width to the .container the grid will fill up the entire space.

Box 1

Box 2

Box 3

Box 4

Full-width and seamless

By adding .seamless to the full-width .container all gaps will be removed.

Box 1

Box 2

Box 3

Box 4