Docs
Search…
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. 1.
    Click on Stylesheets
  2. 2.
    Create new Stylesheet with name eg. Grid overlay
  3. 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
Copy link
On this page
Customize Grid Overlay
Default breakpoint
Custom Breakpoint - 1120px
Custom Breakpoint - 920px
Boilerplate overview