Grid Guide

Before we dive inside all options we can use, let's understand terms Offset, Gutter and maximal width. On the image below you can se what these options will change in grid overlay.

Grid Guide options

Now we undestand terms so let's dive iniside all options which we can customize. All options are given in table below:

Property	CSS variable	Description
Gutter	--ws_gutter	Gap/Disance between two columns (px, rem)
Offset	--ws_offset	Minimal Distance from L/R edge of the screen to start/end of the grid (px, rem) ** for full-width set to 0px
Max. width	--ws_max_width	Maximal grid width (px, rem) ** for full-width set to 100%
Columns	--ws_columns	Number of columns (16, 12, 8 etc.)
Color	--ws_color	Controls grid overlay color (hex, hsla, rgba) ** you need set color with at least 50% opacity to see content behind overlay

Table 1: Grid overlay controls

In Table 1. we can se five properties and which CSS variables we need to use so in order to adjust grid overlay to be as we want.

Customize Grid Overlay

Before creating configuration we should:

1. Click on Stylesheets

2. Create new Stylesheet with name eg. Grid overlay

3. Open newly created Stylesheet

Default breakpoint

For default style (max. screen size) use boilerplate 1.

Here you should define all five value. Later we change just values which we want to be changed.

If you want full-width grid you should set --ws_max_width value to 100%, and if we want container based grid we can set this value to page width eg. 1120px and this will ensure max-grid width.

/*BASE CONFIG*/
/*Default breakpoint*/
:root{
	--ws_gutter: 16px;
	--ws_offset: 32px;
	--ws_max_width:100%;
	--ws_columns:16;
	--ws_color:hsla(143.4, 100%, 25.1%, 0.2);
}

Boilerplate 1: Default breakpont

Don't limit grid max width with relative units like 80%, 80vw, it should be 100% or some max. value defined in px, rem, em.

Custom Breakpoint - 1120px

For custom style at screen size 1120px and below use boilerplate 2.

Here we want to decrese number of columns from 16 to 12 and make smaller screen offset for eg. 16px.

/*BREAKPOINT BOILER PLATE*/
@media (max-width:1120px){
	:root{
	--ws_columns:12;
	--ws_offset: 16px;
	}
}

Boilerplate 2: Custom breakpoint 1120px and below

Custom Breakpoint - 920px

For custom style at screen size 920px and below use boilerplate 3.

Here we want to decrese just number of columns from 12 to 4 and we do it like in Boilerplate 3.

/*BREAKPOINT BOILER PLATE*/
@media (max-width:920px){
	:root{
	--ws_columns:4;
	}
}

Boilerplate 3: Custom breakpoint 920px and below

Boilerplate overview

Now we understand how

/*BASE CONFIG*/
/*Default breakpoint*/
:root{
	--ws_gutter: 16px;
	--ws_offset: 32px;
	--ws_max_width:100%;
	--ws_columns:16;
	--ws_color:hsla(143.4, 100%, 25.1%, 0.2);
}
/* 1120px and below*/
/*BREAKPOINT BOILER PLATE*/
@media (max-width:1120px){
	:root{
	--ws_columns:12;
	--ws_offset: 16px;
	}
}
/* 920px and below*/
/*BREAKPOINT BOILER PLATE*/
@media (max-width:920px){
	:root{
	--ws_columns:4;
	}
}

Boilerplate 4: Multibreakpoint boilerplate