Based on CSS grid

CSS Grid is a revolutionary tool for creation of responsive layouts which is accessible right in CSS.
We have implemented several accomplishments to Responsee which CSS Grid offers (real number of solutions and possibilities offered by CSS Grid is, however, broader).
By means of CSS Grid Responsee gains possibilities which were not possible before and now more flexible layouts can be created.

Using of CSS Grid:

Works with columns is the same as with standard Responsee grid.
Standard Responsee grid is defined by “.line” class. The new one based on the CSS Grid is defined by “.grid” class. Both systems are equal and they can be used on the same website at the same time, however, due to little differences in displaying we do not recommend to combine those systems (layouts with CSS Grid system are wider by 1.25rem).
Interesting thing of the CSS Grid is the feature that particular columns in a line keep their height equal no matter how much content they have (the height is determined by the column with the largest content). Thus the layout is neater.

Correct structure based on CSS Grid is:

<div class="grid">
<div class="s-12 m-6 l-4 box-dark">s-12 / m-6 / l-4</div>
<div class="s-12 m-6 l-4 box-dark">s-12 / m-6 / l-4</div>
<div class="s-12 m-6 l-4 box-dark">s-12 / m-6 / l-4</div>
</div>

(.box-dark is only sample class for padding and background)

More simple and more readable HTML code:

More simple and more readable HTML code is a great advantage of it and particularly for us the greatest accomplishment. The CSS Grid enables less numerous encapsulation of particular HTML elements with the same result.

Encapsulation of the HTML elements compare:

1. Standard Responsee grid with “.line” class (more code):

<div class="line">
<div class="margin">
<div class="s-12 m-6 l-4">
<div class="box-dark">s-12 / m-6 / l-4</div>
</div>
<div class="s-12 m-6 l-4">
<div class="box-dark">s-12 / m-6 / l-4</div>
</div>
<div class="s-12 m-6 l-4">
<div class="box-dark">s-12 / m-6 / l-4</div>
</div>
</div>
</div>

2. Based on CSS Grid with “.grid” class (less code):

<div class="grid margin">
<div class="s-12 m-6 l-4 box-dark">s-12 / m-6 / l-4</div>
<div class="s-12 m-6 l-4 box-dark">s-12 / m-6 / l-4</div>
<div class="s-12 m-6 l-4 box-dark">s-12 / m-6 / l-4</div>
</div>

How to work with the Rows

As the CSS Grid name itself suggests, it is two-dimensional system which is able to divide the layout into columns and rows.
We have utilized this function as a base for our grid and we have segmented the layout into 12 columns and 12 rows. On the contrary to the standard layout also rows were increased. The grid can be used also in a standard way, of course – it means to segment the layout only into columns. For more creative layouts we, however, recommend to use also the system of rows. In practise it means that an element we can display for instance in 1 column and 3 rows.

For work with the rows use following classes:
“s-row-1” up to “s-row-12”
“m-row-1” up to “m-row-12”
“l-row-1” up to “l-row-12”
“xl-row-1” up to “xl-row-12”
“xxl-row-1” up to “xxl-row-12”

Column displayed on 2 row

<div class="grid margin">
<div class="s-12 l-4 l-row-3 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-4 / l-row-3</p>
</div>
<div class="s-12 l-4 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-4</p>
</div>
<div class="s-12 l-4 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-4</p>
</div>
<div class="s-12 l-4 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-4</p>
</div>
<div class="s-12 l-4 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-4</p>
</div>
<div class="s-12 l-4 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-4</p>
</div>
<div class="s-12 l-4 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-4</p>
</div>
</div>

Column displayed on 3 row

<div class="grid margin">
<div class="s-12 l-4 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-4</p>
</div>
<div class="s-12 l-4 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-4</p>
</div>
<div class="s-12 l-4 l-row-2 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-4 / l-row-2</p>
</div>
<div class="s-12 l-4 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-4</p>
</div>
<div class="s-12 l-4 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-4</p>
</div>
</div>

Column displayed on 2 row and column displayed on 3 row

<div class="grid margin">
<div class="s-12 l-3 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-3</p>
</div>
<div class="s-12 l-3 l-row-2 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-3 / l-row-2</p>
</div>
<div class="s-12 l-3 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-3</p>
</div>
<div class="s-12 l-3 l-row-3 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-3 / l-row-3</p>
</div>
<div class="s-12 l-3 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-3</p>
</div>
<div class="s-12 l-3 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-3</p>
</div>
<div class="s-12 l-3 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-3</p>
</div>
<div class="s-12 l-3 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-3</p>
</div>
<div class="s-12 l-3 box-dark margin-bottom">
<h5>Some title</h5>
<p>s-12 / l-3</p>
</div>
</div>

Columns Order

Another accomplishment of the CSS Grid is a change in order of columns in dependence on display resolution of a device.

For work with the order of columns use following classes:
“s-order-1” up to “s-order-12” and “s-order-last”
“m-order-1” up to “m-order-12” and “m-order-last”
“l-order-1” up to “l-order-12” and “l-order-last”
“xl-order-1” up to “xl-order-12” and “xl-order-last”
“xxl-order-1” up to “xxl-order-12” and “xxl-order-last”

Example of columns with changed order (try resize your browser screen)

<div class="grid margin">
<div class="s-12 l-4 l-order-3 xl-order-2 box-dark">
Column 1 with classes ".l-order-3" and ".xl-order-2"
</div>
<div class="s-12 l-4 l-order-2 xl-order-3 box-dark">
Column 2 with classes ".l-order-2" and ".xl-order-3"
</div>
<div class="s-12 l-4 l-order-1 xl-order-1 box-dark">
Column 3 with classes ".l-order-1" and ".xl-order-1"
</div>
</div>

Other Examples

Application of CSS grid with utilization of “margin” class.
Blank space between particular DIVs is 1.25rem:

<div class="grid margin">
<div class="s-12 m-6 l-4 box-dark">s-12 / m-6 / l-4</div>
<div class="s-12 m-6 l-4 box-dark">s-12 / m-6 / l-4</div>
<div class="s-12 m-6 l-4 box-dark">s-12 / m-6 / l-4</div>
</div>

Application of CSS grid with utilization of “margin2x” class.
Blank space between particular DIVs is 2.5rem:

<div class="grid margin2x">
<div class="s-12 m-6 l-4 box-dark">s-12 / m-6 / l-4</div>
<div class="s-12 m-6 l-4 box-dark">s-12 / m-6 / l-4</div>
<div class="s-12 m-6 l-4 box-dark">s-12 / m-6 / l-4</div>
</div>

Combination of “margin” and “margin2x” classes:

<div class="grid margin2x">
<div class="s-12 m-4 l-3 aside-nav margin-bottom">
<ul>
<li><a>Home</a></li>
<li><a>Product</a></li>
<li><a>Some title</a></li>
<li><a>Contact</a></li>
</ul>
</div>
<div class="s-12 m-8 l-9 grid margin">
<div class="s-12 l-4 box-dark margin-bottom">s-12 / l-4</div>
<div class="s-12 l-4 box-dark margin-bottom">s-12 / l-4</div>
<div class="s-12 l-4 box-dark margin-bottom">s-12 / l-4</div>
<div class="s-12 l-4 box-dark margin-bottom">s-12 / l-4</div>
<div class="s-12 l-4 box-dark margin-bottom">s-12 / l-4</div>
<div class="s-12 l-4 box-dark margin-bottom">s-12 / l-4</div>
</div>
</div>

Application of grid with nested columns:

<div class="grid margin">
<div class="s-3 box-dark">s-3</div>
<div class="s-6 grid margin">
<div class="s-12 m-6 l-4 box-dark">s-12 / m-6 / l-4</div>
<div class="s-12 m-6 l-4 box-dark">s-12 / m-6 / l-4</div>
<div class="s-12 m-6 l-4 box-dark">s-12 / m-6 / l-4</div>
</div>
<div class="s-3 box-dark">s-3</div>
</div>

Application of “center” class:

<div class="grid">
<div class="s-12 l-4 center box-dark">s-12 / l-4 / center</div>
<div class="s-12 l-6 center box-dark">s-12 / l-6 / center</div>
<div class="s-12 l-8 center box-dark">s-12 / l-8 / center</div>
</div>