css网格_CSS网格和CSS区域

css网格

The answer to a Grid question on Twitter was once again CSS Regions. CSS Regions … so close but yet so far away. At one point the specification looked as though it would be soon implemented in a number of browsers - it made it into Safari, and in a slightly peculiar form Internet Explorer. It was being implemented in Blink, and was then pulled from Blink.

Twitter上的Grid问题的答案再次是CSS Regions。 CSS区域……如此之近，却又相距甚远。 在某一时刻，该规范似乎很快就会在许多浏览器中实现-使其成为Safari，并且以Internet Explorer的形式出现。 它正在Blink中实现，然后从Blink中撤出。

If you want to learn more about Regions, you can read this article from Sara Soueidan.

如果您想了解有关地区的更多信息，可以阅读Sara Soueidan的这篇文章 。

I think Regions, like Exclusions, start to make real sense once we have Grid Layout. Currently, to combine the two we need to use WebKit Nightlies as they have Grid and Regions, both using the -webkit prefix. If you want to play with the code, download a Nightly build here and see the CodePen here.

我认为，一旦有了“网格布局”，诸如“ 排除”之类的区域便开始变得有意义。 当前，要将两者结合起来，我们需要使用WebKit Nightlies，因为它们具有Grid和Regions，均使用-webkit前缀。 如果您想使用该代码， 请在此处 下载Nightly版本并在此处查看CodePen 。

For everyone else I created a video to demonstrate.

我为其他所有人制作了一个视频来演示 。

I’m using Grid Layout to position items on a Grid, then taking a complete article and flowing it through fixed height items on the Grid. If we were just to use Grid Layout we could declare a Grid on our article and then use Grid auto placement to place the paragraphs into grid cells not occupied by images, however if a paragraph was longer it would either stretch the row or become cut off. We can’t get this effect of content flowing from one cell to another as we can with Regions.

我正在使用“网格布局”将项目放置在网格上，然后获取完整的文章并使其流过网格上固定高度的项目。 如果仅使用“网格布局”，则可以在文章上声明一个“网格”，然后使用“ 网格自动放置”将段落放置到图像不占用的网格单元中，但是，如果段落较长，则会拉伸该行或将其切断。 我们无法像区域一样获得内容从一个单元流到另一个单元的效果。

翻译自: https://rachelandrew.co.uk/archives/2016/03/25/css-grid-and-css-regions/

css网格