Is it bad practice to nest CSS Grids?

It is not bad practice, it is recommended for proper display.

I have one caveat to mention, separate each nested level into its own file for debugging purposes. When nesting multiple levels deep, a single missing or misplaced </div> can significantly alter the output and will be very hard to debug. My suggestion is any further nesting also should be split out into separate components, so each level can be tested independently.


There is nothing wrong or invalid with nesting grid containers.

The grid specification doesn't prohibit, or even admonish, against the practice. It says this:

Grid containers can be nested or mixed with flex containers as necessary to create more complex layouts.

In fact, nesting grid containers is what you must do to apply grid properties to the descendants of a top-level container, since grid layout works only between parent and child elements.

More details here:

  • Grid properties not working on elements inside grid container
  • Positioning content of grid items in primary container (subgrid feature)