How to lay out elements within containers on a grid? Nested grids?

Grid systems (i.e. columns, gutters and margins) are great for pages with flat content, but I'm not sure how to best use them together with containers (e.g. cards).

Imagine we have a 768px grid with 6 columns and a card that takes all of them:

Solution A might be to use a nested, independent grid within a container, e.g.:

The problem is, if we have more than one level of containers, we can end up with a grid within a grid within a grid etc., which may be hard to work with during the design process. Even in case of one main and one nested grid things start to look complicated:

Solution B might be to make a grid very dense, with lots of columns, so that the elements within a container could be aligned to the same (main) grid, e.g.:

Solution C might be to use a different technique to lay out elements within a card, e.g. 8-pixel Grid, so that the inner paddings and margins would use multiples of 8 pixels, independently on the main grid.

What's the best approach from your experience?