如何工作CSS grid-autoflow？

2023年9月21日 189次阅读

我遇到了一个问题,我不明白隐式网格是如何工作的.我阅读了文档,MDN和其他一些资源.但是有一个悬而未决的问题.

.grid {
  display: grid;
  grid-template: repeat(2, 100px) / repeat(6, 1fr);
  grid-gap: 1rem;
  font-size: 2rem;
}

.grid__item {
  background-color: #BDBDBD;
}

.grid__item--1 {
  grid-row: 1 / -1;
}

.grid__item--5 {
  grid-row: 1 / -1;
}
<div class="grid">
  <div class="grid__item grid__item--1">1</div>
  <div class="grid__item grid__item--2">2</div>
  <div class="grid__item grid__item--3">3</div>
  <div class="grid__item grid__item--4">4</div>
  <div class="grid__item grid__item--5">5</div>
  <div class="grid__item grid__item--6">6</div>
</div>

这是结果：
《如何工作CSS grid-autoflow？》

为什么第五块在第二块之前走？

代码：https://jsfiddle.net/serhioses/51do02xa/

最佳答案 您想要的是我们首先定义的
in this part of the specification：

  1. Process the items locked to a given row.

For each grid item with a definite row position (that is, the grid-row-start and grid-row-end properties define a definite grid position), in order-modified document order:

然后

  1. Position the remaining grid items.

所以基本上我们将具有明显放置的项放在行内(grid-row-start和grid-row-end应该与auto不同)然后我们将另一个放在上面的规范中描述的算法中.

即使您修改订单,您也会得到相同的结果：

.grid {
  display: grid;
  grid-template: repeat(2, 100px) / repeat(6, 1fr);
  grid-gap: 1rem;
  font-size: 2rem;
}

.grid__item {
  background-color: #BDBDBD;
}

.grid__item--1 {
  grid-row: 1 / -1;
}

.grid__item--5 {
  grid-row: 1 / -1;
  order:100;
}
<div class="grid">
  <div class="grid__item grid__item--1">1</div>
  <div class="grid__item grid__item--2">2</div>
  <div class="grid__item grid__item--3">3</div>
  <div class="grid__item grid__item--4">4</div>
  <div class="grid__item grid__item--5">5</div>
  <div class="grid__item grid__item--6">6</div>
</div>
点赞