All geek questions in one place

Positioning the contents of mesh elements in the main container (sub-function)

All CSS grid guides seem to imply a structure in which elements located in the grid are children of the grid itself.

<div class="wrapper"> <div>A</div> <div>B</div> </div>

Where .wrapper has display: grid and display: grid property definition.

Does it make sense if I want to position the element, which is the "grandson" of the grid, by the network itself (instead of relying on its parent?)

 <div class="wrapper"> <div>A</div> <div> <div>B</div> <div>C</div> </div> </div>

Here I want to be able to put A, B and C each in its own grid line; Does it even make sense?

+5
source share
1 answer

display: subgrid

From CSS Grid Level 2 Specification :

2. Containers with mesh

Subgrids provide the ability to pass grid parameters down through nested elements and size information based on content back to their parent grid.

If the element is a mesh element (i.e., it is in the stream, and its parent element is a mesh container), display: subgrid makes the element a subgrade (which is a special type of container with a mesh) and therefore ignores its grid-template-* and grid-*-gap in favor of the adoption that it covers.

3. Subnets

The mesh element itself can be a mesh container, giving it display: grid . In this case, the layout of its contents does not depend on the location of the grid in which it participates.

In some cases, it may be necessary for the contents of several grid elements to align with each other. A grid container, which itself is a grid element, can defer the definition of its rows and columns in its parent grid container using display: subgrid , making it a subnet.

In this case, the elements of the subnet grid are involved in determining the grid of the container of the parent grid, which allows you to align the contents of both grids. More details.

This feature is not yet implemented in major browsers. Who knows when it will be.

In a grid, only the child flows of the container become grid elements and can take on grid properties.

With the display: subgrid element of the grid element, the children of the element correspond to the lines of the container.

According to grid level 1 specification, display: subgrid deferred to Level 2 .

Currently, display: grid for display: grid elements (i.e. nested mesh containers) can be useful in some cases.

Another possible workaround is display: contents . The method is explained here:

Additional Information:

+2
source

Source: https://habr.com/ru/post/1274252/

More articles:


All Articles