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.
| Grid | Grid Plus | Grid Plus Pro | |
| Grid type | Flex | CSS Grid | CSS Grid |
| Item control | Flex | Flex | Flex |
| Equal width columns | Yes | Yes | Yes |
| Split width columns | No | Yes | Yes |
| Span columns | No | Yes | Yes |
| Span rows | No | Yes | Yes |
| Overlap items | No | Yes | Yes |
| Breakpoints | 3 | 3 | Unlimited |
| Style at breakpoints | No | No | Yes |
| Align at breakpoints | No | No | Yes |
| Filter grid items | No | Yes | No |
| Stacks styling | Yes | Yes | No |
| Colour coding (Edit mode) | No | No | Yes |
| Developer notes (Edit mode) | No | No | Yes |
| Show / Hide controls (Edit mode) | No | No | Yes |
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
