Grid Plus and Grid Plus Pro are both based on the CSS Grid specification. It is a really powerful method for building grids but to get the most out of these grid stacks you really need to spend a bit of time getting familiar with the basics of CSS Grid. It's particularly important to understand the various options for specifying the sizes of columns and rows.
You will find a load of resources online to learn about CSS Grid (just Google it) but here are a few resources that are definitely a good starting point:
- Complete guide to CSS grid (there is a LOT here that you won't need but there is a lot of good stuff in amongst it!)
- Introduction to the 'fr' unit (the fr unit is amazing - you need to learn all about this!)
- Introduction to CSS Grid
- Learn CSS Grid with a free online grid generator
- Learn CSS grid (FREE course!)
- Grids by example
CSS Grid code generators
As well as learning how to do all of this by yourself, there are some useful websites that will generate code for columns (and/or rows). These values can then be pasted into Grid Plus. Here are a couple of example sites:
- Griddy (use this to visual tool to create your desired column setup)
- Compound grid generator (this is a really great tool for creating split width columns that can be used for really interesting layouts)
The only bits of code that you would need to capture from these sites is the value for 'grid-template-columns' (and/or rows). You can paste these values straight into the Grid Plus settings field for a custom column definition.
