Grid Plus Pro stack

Avatar

By Stuart Marshall

updated over 2 years ago

Grid Plus Pro is available in the Add-on pack.

Grid Plus Pro is built upon the same CSS Grid foundation as the regular Grid Plus stack. As such, the heart of the stack works in the same way. The main difference between the 2 stacks is that the Grid settings and most of the Grid Item settings have been taken out of the main stacks and are now in their own 'child' stacks. As many of these child stacks can be added as required to cover every need ay any breakpoint. It is therefore infinitely scalable (unlike the regular Grid Plus stack which is limited to 3 breakpoints).

Other key differences are that you can style the grid items at each breakpoint. You can also align any added content in grid items at each breakpoint too. 

View a comparison between all 3 Source Grid stacks.


Demo file

Here is a project file. It demonstrates the differences in Edit mode and has a couple of example grids built with Grid Plus Pro. The actual building of grids is the same as with Grid Plus and so any demo files for that can be quite easily translated into the Pro stack.

Download project file


To get the most out of Grid Plus it is strongly recommended that you take some time to view/dissect all of the available examples (including the 'Welcome to Source' project file, the included grid templates and the various project files that have been made available). 

You will also find it useful to learn at least the basics about CSS Grid. We have put together a list of useful third-party resources here: https://knowledge.shakingthehabitual.com/article/74-learn-css-grid

Did this answer your question?