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:

Points to note: There are settings in Grid Plus for most of the CSS Grid specification - but it does not use template areas (so there is no point learning too much about them!).


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.

IMAGE