Grid systems (ie columns, gutters and edges) are ideal for pages with flat content. However, I am not sure how best to use them with containers (such as cards).
Imagine we have a 768px grid with 6 columns and a map that can hold all of them:
Solution A could be a nested, independent grid in a container, e.g.
The problem is, if we have more than one level of containers, there may be a grid inside a grid inside a grid, and so on, which may be difficult to work with during the design process. Even with a main grid and a nested grid, things look complicated:
Solution B It could be to make a grid very dense, with many columns, so that the elements in a container could be aligned to the same (main) grid, e.g.
Solution C could be the use of another technique for laying out elements within a map, e.g. 8-pixel grid, so the inner padding and margins use a multiple of 8 pixels, regardless of the main grid.
What is the best approach from your experience?