Creating dynamic layouts with GRID system

This page is Work in Progress! Keep following up...

About the CSS Grid Layout

CSS Grid Layout is the most advanced layout management system available in plain CSS.

Grid is based on a bi-dimensional system: it can handle both columns and rows, unlike other systems such as flexbox, which is explicitly mono-dimensional.

The implementation of a Grid Layout includes the creation of a parent element (which becomes the Grid Container) and children (which become Grid Items). 

A Grid item can be a Grid container itself, allowing the creation of nested grids.

Hint: to know the basics about css grid visit this link: https://www.w3schools.com/css/css_grid.asp

Quanta's layouts are fully based on CSS Grid. Most notably, it's possible to use each qTag as a Grid container and / or grid item, allowing the creation of advanced responsive layouts, writing virtually no line of CSS or HTML.


Using Grid with qTags

Doing grids in Quanta is easy, thanks to their immediate application to qTags. 

By adding grid parameters to your qTags, in facts, you can create complex layouts without even writing a single line of CSS.

Remember: a grid in Quanta has 12 columns by default. 

Each element (qTag) that is contained inside a grid can have a customized position, column span, row span, etc. 

Any element (including the body) having the class "grid" will become a 12-columns grid by default.

By setting this class, the element becomes a grid container, and direct sons will be the grid cells. A grid cell, can of course be a grid itself.


Grid attributes - reference chart

The grid system in Quanta is thought mobile-first - so the default definitions (column span, etc.) will apply to all resolutions, from mobile on. Then you can define two different definitions for tablet / medium screens (md) and desktop/laptop/large screens (lg), as follows:


Attribute name (css class)
Description
grid
Makes the qTag a "grid" (12x12 by default)
grid-span-X
Defines the column span of the grid
grid-span-md-X
Defines the column span of the grid in MEDIUM screens
grid-span-lg-X
Defines the column span of the grid in LARGE screens
grid-row-span-X
Defines the row span of the grid
grid-row-span-md-X
Defines the row span of the grid in MEDIUM screens
grid-row-span-lg-X
Defines the row span of the grid in LARGE screens
p-0
Defines a zero-padding cell item



Having Lists behave as Grids

One beatiful thing about grids, is that you can make any Quanta List show up as a Grid, specifying parameters both for the container / list, and for the individual list items.


Example:

A grid containing 2 cells, one with 4 columns span and the other with 8 columns span:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni a delectus animi, dignissimos totam incidunt vel minus veniam voluptatibus quo cumque eum nesciunt nobis, perferendis velit fugit culpa et quidem. Magni a delectus animi, dignissimos totam incidunt vel minus veniam voluptatibus quo... Magni a delectus animi, dignissimos totam incidunt vel minus veniam voluptatibus quo cumque eum nesciunt nobis, perferendis velit fugit culpa et quidem.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni a delectus animi, dignissimos totam incidunt vel minus veniam voluptatibus quo cumque eum nesciunt nobis, perferendis velit fugit culpa et quidem. Magni a delectus animi, dignissimos totam incidunt vel minus veniam voluptatibus quo... Magni a delectus animi, dignissimos totam incidunt vel minus veniam voluptatibus quo cumque eum nesciunt nobis, perferendis velit fugit culpa et quidem.



Example of Grid List using the LIST qtag:

[LIST|grid=grid|grid_list_item=grid-span-4:fruits]



Example of Grid Blog using the BLOG qtag:

[BLOG|grid=grid|grid_list_item=grid-span-4:fruits]


A grid example with LIST qtag and a style template:

[LIST|tpl=image_title_linked|grid=grid|grid_list_item=grid-span-4:animals]


Grid List - List Item attributes reference chart

You can select grid attributes for individual (or group of) list items, by using the attributes below

 

Attribute name (css class)
Description
grid_list_item
Affects all list items
grid_list_item_X
Affects only the list item n.X (i.e. list-item-2=grid-span-4 will make only the second element in the list occupy 4 cells)
grid_list_item_odd
Affects all odd items (1,3,5, etc.)
grid_list_item_even
Affects all even items (2,4,6,etc.)