编程技术网

关注微信公众号,定时推送前沿、专业、深度的编程技术资料。

 找回密码
 立即注册

QQ登录

只需一步,快速开始

极客时间

将嵌套的网格项放置在更高级别的容器中(子网格函数):Positioning nested grid items in a higher level container (a subgrid function)

rinat.io docker 2022-5-10 15:10 9人围观

腾讯云服务器
将嵌套的网格项放置在更高级别的容器中(子网格函数)的处理方法

所有有关CSS网格的指南似乎都暗示着一种结构,其中放置在网格中的元素是网格本身的子级.

All guides about CSS grid seem to imply a structure where the elements positioned in a grid are children of the grid itself.

<div <div>A</div> <div>B</div> </div> 

其中 .wrapper 具有 display:grid 和网格属性的定义.

Where .wrapper has display: grid and a definition of the grid properties.

如果我想将作为网格孙子元素"的元素放置在网格本身上(而不是依赖于其父元素)是否有意义

Does it make any sense if I want to position a element that is a "grandchild" of the grid, on the grid itself (instead of relying on its parent ?)

<div <div>A</div> <div> <div>B</div> <div>C</div> </div> </div> 

在这里,我希望能够将A,B和C分别放在自己的网格行上;甚至有道理吗?

Here, I want to be able to put A, B and C each on their own row of the grid; would that even make sense ?

问题解答

显示:子网格

来自 CSS网格2级规范草案:

2.网格容器

子网格提供了通过嵌套元素向下传递网格参数的功能,并将基于内容的大小调整信息传回到其父网格.

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

如果元素是网格项(即,它是流入项,并且其父项是网格容器), display:subgrid 将元素设为子网格(这是一个特殊类型的网格容器框),因此忽略其 grid-template-* grid-*-gap 属性,有利于采用父网格跟踪它的跨度.

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.子网格

通过将其赋予 display:grid ,网格项本身可以成为网格容器.在这种情况下,其内容的布局将独立于其参与的网格的布局.

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.

在某些情况下,多个网格项目的内容可能必须彼此对齐.本身是网格项目的网格容器可以使用 display:subgrid 将其行和列的定义推迟到其父网格容器,使其成为子网格.

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.

在Grid中,只有容器的流入子级才成为网格项,并且可以接受网格属性.

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

在网格项目上使用 display:subgrid 时,该项目的子项尊重容器的行.

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

根据网格级别1规范 display:subgrid 已推迟到 2级.

目前,在某些情况下,在网格项目(即嵌套网格容器)上进行 display:grid 可能会有用.

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

另一种可能的解决方法是 display:contents .该方法在这里说明:

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

更多信息:

这篇关于将嵌套的网格项放置在更高级别的容器中(子网格函数)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程技术网(www.editcode.net)!

腾讯云服务器 阿里云服务器
关注微信
^