Source grid stacks comparison


By Stuart Marshall

updated 8 months ago

A huge part of Source's power and flexibility comes from its grid stacks. Source ships with 3 grid stacks and there is virtually no layout that you cannot build with them. Here is a brief overview of the differences between them.

GridGrid PlusGrid Plus Pro
Grid typeFlexCSS GridCSS Grid
Item controlFlexFlexFlex
Equal width columnsYesYesYes
Split width columnsNoYesYes
Span columnsNoYesYes
Span rowsNoYesYes
Overlap itemsNoYesYes
Style at breakpointsNoNoYes
Align at breakpointsNoNoYes
Filter grid itemsNoYesNo
Stacks stylingYesYesNo
Colour coding (Edit mode)NoNoYes
Developer notes (Edit mode)NoNoYes
Show / Hide controls (Edit mode)NoNoYes

Which stack you use will depend on your needs for each particular layout that you want to achieve. Here is the system that I use but your needs / preferences may differ:

  • Equal width columns: Source Grid
  • More advanced columns / grids (i.e. split widths / overlapping / layering): Grid Plus Pro
  • Grid with filterable items: Grid Plus

Did this answer your question?