css网格_了解CSS网格“自动放置算法”

最新推荐文章于 2022-07-06 10:01:24 发布

daique1908

最新推荐文章于 2022-07-06 10:01:24 发布

阅读量222

点赞数

文章标签： java css 人工智能 html spring

css网格

在我们较早CSS Grid入门教程之一中，我们研究了流体柱和更好的排水沟。我们了解到，没有必要确切指定我们要放置网格项目的位置。如果我们声明网格的属性，则Grid将根据其自动放置算法将项目放入其中。

在本教程中，我们将研究该算法如何进行工作以及如何影响它。

建立

它始于网格

这是一个开始演示的演示网格；这是我们声明要display: grid;的容器display: grid; 并包含18个子元素。我们已经说过，它应该有五列，每列相等的宽度，至少具有相同的行数，以及一个全为2px的窄装订线。

grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 2px;

到目前为止，一切都很好，您可以看到Grid拿走了我们的18个项目，并将它们推入，从左上方开始，向右移动，然后逐行向下移动。这种行为很像浮动工作的方式。

注意：如果我们处理以下direction: RTL;则从左到右的行为将被反转direction: RTL; 布局。

在工程中投掷扳手

这一切都很好，而且很整洁，但是让我们看看当我们的物品不合适时会发生什么。在.item-7我们将添加一些规则，使其跨越两列和两行以使其更大：

.item-7 {
  background: #e03f3f;
  grid-column: span 2;
  grid-row: span 2;
}

现在看起来如何？

还不错！ .item-7填满了更多空间，因此.item-8和.item-9的位置更远。然后.item-10会查看.item-9旁边是否有空闲空间，当看到没有空闲空间时，它会向下移动并再次从最左边开始。其他项目继续以相同的方式堆积。

但是，等等，如果我们也使.item-9稍微超重怎么办？

现在变得有趣了。 .item-9不再适合末尾的列，因此将其向下推到下一行。由于它无法容纳.item-7以外的任何内容，因此它保持.item-7 。您可能会想到.item-10会再次将其自身塞在.item-6 ，但是，如果您还记得的话，它会搜索一个空列，然后无法向下移动并再次向左移。这是一个重要的概念。

对网格自动流说“ Hello”

如果您看一下先前的演示，您会发现.item-18在找不到.item-17旁边的空间时，已经向下移动了一行。我们实际上只定义了五行，但是Grid假设我们要添加另一行。这是由于grid-auto-flow属于grid元素，其默认值为row 。我们可以根据需要将此值更改为column ，这将完全改变网格的外观：

看起来有点相似，但是您会注意到我们的项目已放在左上角，然后向下移动以填充每一行，然后移至第二列，依此类推。因此，现在当某个项目太大而无法启动时，以下项目将搜索下一个空闲的行空间，然后如果失败，则移至下一个列。