网格布局和表格布局_网格布局自动放置和打包模式

网格布局和表格布局

In February I read with interest a blog post from Manuel Rego Casasnovas on the implementation of the CSS Grid Layout automatic placement feature. We have been able to use auto-placement for some time in the Blink implementation, and you can see examples on my Grid by Example site. The features shipped by Igalia in February implement the packing modes – dense and sparse.

2月份，我感兴趣地阅读了Manuel Rego Casasnovas的博客文章，内容涉及CSS Grid Layout自动放置功能的实现。 我们已经能够在Blink实现中使用自动放置一段时间，并且您可以在我的Grid by Example网站上看到示例。 Igalia在2月发布的功能实现了打包模式-密集和稀疏。

As I’m preparing for my presentations on CSS Grid Layout at Fluent and An Event Apart in the next few weeks, I built myself a few examples to test this out. I thought I’d share one of those here.

在接下来的几周中，当我准备在Fluent和An Event Apart上进行有关CSS网格布局的演示时，我为自己建立了一些示例进行测试。 我以为我会在这里分享其中之一。

I’ve written on this blog and also created several examples on Grid by Example, about how CSS Grid Layout enables the positioning of page elements on a Grid. You can also however use Grid Layout to automatically display items on a Grid, without giving them positioning information. You can combine this automatic positioning with positioned elements – in the case of wanting to position some things and not others.

我在此博客上写过文章，并且还在“逐个示例”的Grid上创建了几个示例，它们介绍了CSS Grid Layout如何使页面元素在Grid上定位。 但是，您也可以使用“网格布局”在网格上自动显示项目，而无需提供它们的位置信息。 您可以将此自动定位与已定位的元素结合在一起–如果要定位某些东西而不是其他东西。

一个例子 (An example)

My markup is an unordered list, the first item in the list is a chunk of text. Everything else is an image. I have added a class of wide to a couple of the list items.

我的标记是无序列表，列表中的第一项是一小段文本。 其他一切都是图像。 我在几个列表项中添加了一个广泛类。

<ul class="wrapper">   
  <li class="text"><p>…</p></li>
  <li><img src="../images/balloon1.jpg" alt="hot air balloon" />
  <p>Balloons 1</p></li>
  <li><img src="../images/balloon2.jpg" alt="hot air balloon" />
  <p>Balloons 2</p></li>  
  <li><img src="../images/balloon3.jpg" alt="hot air balloon" />
  <p>Balloons 3</p></li>
  <li class="wide"><img src="../images/balloon4.jpg" alt="hot air balloon" />
  <p>Balloons 4</p></li>
  <li><img src="../images/balloon5.jpg" alt="hot air balloon" />
  <p>Balloons 5</p></li>
  <li><img src="../images/balloon6.jpg" alt="hot air balloon" />
  <p>Balloons 6</p></li>
  <li class="wide"><img src="../images/balloon7.jpg" alt="hot air balloon" />
  <p>Balloons 7</p></li>
  <li><img src="../images/balloon8.jpg" alt="hot air balloon" />
  <p>Balloons 8</p></li>
</ul> <ul class="wrapper">   
  <li class="text"><p>…</p></li>
  <li><img src="../images/balloon1.jpg" alt="hot air balloon" />
  <p>Balloons 1</p></li>
  <li><img src="../images/balloon2.jpg" alt="hot air balloon" />
  <p>Balloons 2</p></li>  
  <li><img src="../images/balloon3.jpg" alt="hot air balloon" />
  <p>Balloons 3</p></li>
  <li class="wide"><img src="../images/balloon4.jpg" alt="hot air balloon" />
  <p>Balloons 4</p></li>
  <li><img src="../images/balloon5.jpg" alt="hot air balloon" />
  <p>Balloons 5</p></li>
  <li><img src="../images/balloon6.jpg" alt="hot air balloon" />
  <p>Balloons 6</p></li>
  <li class="wide"><img src="../images/balloon7.jpg" alt="hot air balloon" />
  <p>Balloons 7</p></li>
  <li><img src="../images/balloon8.jpg" alt="hot air balloon" />
  <p>Balloons 8</p></li>
</ul>  

In the CSS, I create my grid on the ul with a class of wrapper.

在CSS中 ，我使用包装类在ul上创建网格。

I then position my .text list item so that it sits between column lines 2 and 4, and rows lines 1 and 3.

然后，我将.text列表项放置在第2行和第4行以及第1行和第3行之间。

.text {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}.text {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
} 

The class of wide I set to grid-column-start auto, and grid-column-end to span 2.

我将width的类设置为grid-column-start auto，将grid-column-end设置为span 2。

Any other CSS is just there to format the boxes, I’ve added a border in order that you can easily see the grid items taking full height of the row. The result looks like this.

任何其他CSS都可以用来格式化框，我添加了一个边框，以便您可以轻松地看到网格项目占据了整个行的高度。 结果看起来像这样。

What has happened here is that my list item with the class of text has been positioned on the grid. All of the other items have been positioned according to the dense packing mode that I requested by setting grid-auto-flow to dense. This means that rather than respecting the document source order when laying out the items, any spare gap in the grid will be back-filled if an item is encountered that fits the gap.

这里发生的是我的带有文本类的列表项已放置在网格上。 通过将grid-auto-flow设置为密集，可以根据我要求的密集包装模式放置所有其他物品。 这意味着，在布置项目时，不遵循文档源顺序，如果遇到适合该项目的项目，则网格中的任何备用间隙都将被回填。

In this case the image labelled ‘Balloons 5’ comes after the images ‘Balloons 4’ in the source. ‘Balloons 4’ however is set to span two columns and so is too wide for the gap on the second row and drops to the third row. Then, when ‘Balloons 5’ is encountered, a space for it is available on the second row so it is put there, and then the layout continues back after ‘Balloons 4’.

在这种情况下，标有“气球5”的图像位于源中的“气球4”图像之后。 但是，“气球4”设置为跨越两列，因此对于第二行的间隙来说太宽了，而下降到第三行。 然后，当遇到“气球5”时，在第二行上有一个可用的空间，因此将其放在此处，然后在“气球4”之后继续布局。

If we change grid-auto-flow to sparse you can see how now the items are laid out in order and a gap is left.

如果我们将网格自动流更改为稀疏，则可以看到现在如何按顺序布置项目并留有空隙。

You can view the code for this example here, I’ve made that example responsive so the grid redefines for a couple of breakpoints. It’s also worth reading Manuel’s blog post for an in-depth look at how the algorithm works.

您可以在此处查看此示例的代码 ，我使该示例具有响应能力，因此网格重新定义了几个断点。 还值得阅读Manuel的博客文章 ，以深入了解算法的工作原理。

翻译自: https://rachelandrew.co.uk/archives/2015/04/14/grid-layout-automatic-placement-and-packing-modes/

网格布局和表格布局