How Far Does CSS Grid's Formatting Context Reach?

Grid Container Scope Limitations

In CSS Grid, the formatting context is limited to the parent-child relationship within a grid container. Grid properties only apply to its direct children.

Consider the following example:

<ul>

Here, orgChartLevel1 is the grid container, and orgChartLevel1a, orgChartLevel2, and orgChartLevel2b are children within its scope.

However, elements that are descendants of the grid container, such as orgChartLevel2b, are outside of the grid formatting context. Grid properties applied to these elements will not work.

Solution

To apply grid properties to deeply nested elements, you must either:

<ul>

Apply display: grid or display: inline-grid to a parent within the grid container.

Remove any wrapper elements between the grid container and the elements you wish to apply grid properties to.

Notes

<ul>

Grid items can also be grid containers.

Refer to the additional resources below for more information on nesting flex and grid containers.

Related Reading:

<ul>

Position deeply nested elements in a higher level grid container

Proper use of flex properties when nesting flex containers

Is it bad practice to nest CSS Grids?

The above is the detailed content of How Far Does CSS Grid's Formatting Context Reach?. For more information, please follow other related articles on the PHP Chinese website!