design – How to design elements inside containers in a grid? Nested grids?

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:

Main grid and a card.

Solution to it could be to use a nested and independent grid inside a container, for example:

Nested grid inside a card

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:

Main grid and nested together

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:

Dense grid

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?