Grid systems (ie, columns, gutters and margins) are excellent for pages with flat content, but I'm not sure how to best use them together with containers (eg, cards).
Imagine that we have a grid of 768 pixels with 6 columns and a card that takes them all:
Solution to it could be to use a nested and independent grid inside a container, for example:
The problem is that if we have more than one level of containers, we can end up with a grid inside a grid inside a grid, etc., which can be difficult to work with during the design process. Even in the case of a main grid and a nested grid, things start to look complicated:
Solution B it could be to make a very dense grid, with many columns, so that the elements inside a container can be aligned with the same (main) grid, for example:
Solution C it could be to use a different technique to design elements within a card, for example, Grid of 8 pixels, so that internal fills and margins would use multiples of 8 pixels, independently in the main grid.
What is the best approach to your experience?
