subgrid 如何传参_CSS Subgrid新闻和演示

最新推荐文章于 2023-08-20 09:02:13 发布

cundai5745

最新推荐文章于 2023-08-20 09:02:13 发布

阅读量194

点赞数

文章标签： java python css 编程语言 html

原文链接：https://rachelandrew.co.uk/archives/2019/04/16/css-subgrid-news-and-demos/

版权

subgrid 如何传参

A couple of weeks ago I spoke at Frontend NE in Newcastle, a big part of my talk was explaining what the CSS Grid Subgrid feature from Grid Level 2 would contain. With no implementation to work with, I had mocked up a bunch of demos using DevTools for that talk.

几周前，我在纽卡斯尔的Frontend NE上讲话时，我讲的很大一部分内容是解释Grid Level 2CSS Grid Subgrid功能将包含什么。由于没有实现可使用的方式，因此我使用DevTools进行了一系列演示，以进行演示。

En route to San Francisco to Smashing Conf, where I was running a CSS Layout workshop, I was given access to a Try build of Firefox Nightly, which has an early implementation of the feature. This does mean I need to redo some slides for my talks in May so they can use real screenshots, but I’ll take that for actually getting my hands of the feature and being able to try the demos for real!

在前往旧金山的Smashing Conf的途中，我正在举办一个CSS Layout研讨会，在此期间，我可以使用Firefox Nightly的Try版本，该版本具有该功能的早期实现。这确实意味着我需要在5月的演讲中重做一些幻灯片，以便他们可以使用真实的屏幕截图，但我会以实际使用该功能并能够尝试实际演示为前提！

I posted a couple of screenshots on Twitter, and I will be publishing all of my examples over at Grid by Example once the feature is behind a flag in regular Nightly. However for everyone who had better things to be doing than looking at Twitter over the weekend here are a few screenshots. These include links to my CodePen examples so you can see the code for the subgrid elements. I’ve highlighted the grid and subgrid in Firefox DevTools to help you see what you are looking at.

我在Twitter上发布了几个屏幕截图，一旦该功能在常规Nightly中被标记，我将在Grid by Example上发布我的所有示例。但是，对于每个比周末都有更好的事情要做的人，这里有一些屏幕截图。这些包括指向我的CodePen示例的链接，因此您可以查看subgrid元素的代码。我在Firefox DevTools中突出显示了网格和子网格，以帮助您查看所要查看的内容。

列和行的子网格 (Subgrid for columns and rows)

In this case the subgrid is on columns and rows of the parent. This means that there is no implicit grid in the subgridded area, as both dimensions are tied to the available tracks on the parent grid.

在这种情况下，子网格位于父级的列和行上。这意味着在子网格区域中没有隐式网格，因为这两个维度都与父网格上的可用轨迹相关。

CodePen example for subgrid columns and rows.

子网格列和行的CodePen示例。

子网格仅适用于列 (Subgrid for columns only)

In this case I have used a subgrid for columns. This means I can use implicit grid tracks to add as many rows as needed for the items. The rows use their own sizing, just as a nested grid would without subgrid.

在这种情况下，我为列使用了一个子网格。这意味着我可以使用隐式网格轨迹来添加项目所需的任意多行。这些行使用它们自己的大小，就像没有子网格的嵌套网格一样。

CodePen example for subgrid columns

子网格列的CodePen示例

子网格仅适用于行 (Subgrid for rows only)

In this case I have made the rows a subgrid, and defined columns as normal in fr units. As you can see the column tracks do not line up with the parent as they are using their own grid definition.

在这种情况下，我将行设置为子网格，并按fr单位正常定义列。如您所见，列轨道不与父轨道对齐，因为它们使用自己的网格定义。

CodePen example for subgrid rows

子网格行的CodePen示例

I’m so excited to be seeing this in progress, and also to be able to teach it in my workshops and talks. For more background on subgrid, here are some links.

我很高兴看到这一进展，并且能够在我的工作室和讲座中教它。有关子网格的更多背景，请点击此处。