Layout – How are elements in containers arranged in a grid? Nested grid

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:

Main network and a map

Solution A could be a nested, independent grid in a container, e.g.

Nested raster inside a map

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:

Main and interlaced rasters are displayed together

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.

Dense grid

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?