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:

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:

Example of Grid List using the LIST qtag:

[LIST_NODES|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_NODES|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