Is there a “subgrid” feature, to position “grandchildren” of a grid container?

by

display: subgrid

From the CSS Grid Level 2 draft spec:

2. Grid Containers

Subgrids provide the ability to pass grid parameters down through nested elements, and content-based sizing information back up to their parent grid.

If the element is a grid item (i.e. it is in-flow and its parent is a
grid container), display: subgrid makes the element a subgrid (which is a
special type of grid container box) and consequently ignores its
grid-template-* and grid-*-gap properties in favor of adopting the
parent grid tracks that it spans.

3. Subgrids

A grid item can itself be a grid container by giving it display: grid. In this case the layout of its contents will be independent of the layout of the grid it participates in.

In some cases it might be necessary for the contents of multiple grid items to align to each other. A grid container that is itself a grid item can defer the definition of its rows and columns to its parent grid container by using display: subgrid, making it a subgrid.

In this case, the grid items of the subgrid participate in sizing the grid of the parent grid container, allowing the contents of both grids to align. Read more.

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

In Grid, only the in-flow children of the container become grid items and can accept grid properties.

With display: subgrid on a grid item, the children of the item respect the lines of the container.

According to the Grid Level 1 spec, display: subgrid has been deferred to Level 2.

For now, display: grid on grid items (i.e., nested grid containers) may be useful in some cases.

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

More information:

More Related Contents:

  1. Make a div span two rows in a grid
  2. Prevent content from expanding grid items
  3. Why does minmax(0, 1fr) work for long elements while 1fr doesn’t?
  4. Equal height rows in CSS Grid Layout
  5. Position deeply nested elements in a higher level grid container
  6. Align child elements of different blocks
  7. The difference between percentage and fr units
  8. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  9. What is the difference between auto-fill and auto-fit?
  10. What is difference between justify-self, justify-items and justify-content in CSS grid?
  11. How to make the items in the last row consume remaining space in CSS Grid?
  12. Create a Masonry grid with flexbox (or other CSS)
  13. Using CSS transitions in CSS Grid Layout
  14. How can I make a div span multiple rows and columns in a grid?
  15. CSS Grid – Auto height rows, sizing to content
  16. What is the difference between align-items vs. align-content in Grid Layout?
  17. Equal height of elements inside grid item with CSS grid layout
  18. Can I have a varying number of columns per row in a CSS grid?
  19. Why does a grid-area name absent in grid-template-areas create additional tracks?
  20. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  21. CSS Grid auto fit with max-content
  22. Setting different lengths for grid gaps in CSS Grid
  23. Can flex items wrap in a container with dynamic height?
  24. Can I make a CSS grid with dynamic number of rows or columns?
  25. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  26. Is a button allowed to have display:grid? [duplicate]
  27. How is “grid-template-rows: auto auto 1fr auto” interpreted?
  28. How can I force this CSS grid to wrap to a new line without specifying minmax sizes?
  29. grid-area does not seem to work with the attr function, is this by design?
  30. minmax fails (invalid property value)

Leave a Comment