css网格布局如何工作

Question

我想知道Css网格布局是怎样的。在我尝试下面之前，我以为自己已经接近理解了它。

我认为它会使第5项落后于3，因为它没有在网格中定义的位置，而是在第3项之后，它背后的行为是什么？

https://codepen.io/anon/pen/GOPvXO \

＆＃13;

＆＃13;

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper{
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px 50px;
}

.wrapper div{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
}

.wrapper div:nth-child(1){
  background-color: blue; 
  grid-column-start: 1;
  grid-column-end: 3;
}
.wrapper div:nth-child(2){
  background-color: red;
}
.wrapper div:nth-child(3){
  background-color: green;
  grid-column-start: 2;
  grid-column-end: 3;
}
.wrapper div:nth-child(4){
  background-color: lightblue;
    grid-column-start: 2;
    grid-row-end: 4;
}
.wrapper div:nth-child(5){
  background-color: pink;
}
.wrapper div:nth-child(6){
  background-color: lightgreen;
}

＆＃13;

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

W3C docs和this article可以帮助您了解网格以这种方式运作的原因。

让我们看一下如何根据文档中的 8.5网格项目放置算法放置网格项目：

<强> 0。生成匿名网格项

没有匿名项目 - 没有生成网格项目

<强> 1。定位任何未自动定位的内容。

在此步骤中，只有元素4 位于

grid-column-start: 2; /* second column, span 1 */
grid-row-end: 4;      /* third row, span 1 */

<强> 2。处理锁定到给定行的项目。

没有项目锁定到特定行，因此没有位置

第3。确定隐式网格中的列。

显式网格中的列数为3。 没有项目需要超过3列 - 元素1,2和4不需要超过3列，其余的都没有指定显式列，这意味着隐式网格中的列数为3

<强> 4。定位剩余的网格项目。

在您的情况下，算法根据默认的“稀疏”打包工作：

  

将其展示位置的列 - 起始行设置为最早（最小的）   正索引）线索引确保此项目的网格区域不会   重叠任何占用的网格单元并且超过任何网格项   以前通过此步骤放在此行中。

此时您还有五个要素：1,2,3,5和6。 自动放置光标现在位于最开始的行和列上，即第1行和第1列。逐步说明如何放置所有剩余项目：

• 在第1行第1-2行中位置元素1 （明确的列位置），自动放置光标移动到第1行第3列。
• 在第1行第3列中位置元素2 （在两个轴上自动定位），自动放置光标移动到第2行第1列，因为只有3列。
• 第2行第2列中的元素3 （明确的列位置），自动放置光标移动到第2行第3列。
• 第2行第3行中元素5 （两轴自动定位），自动放置光标移至第3行第1列。
• 位置元素6 （两个轴上的自动位置），自动放置光标位于第3行第3列。

如果你想让元素5落后于3，你有两种方法：

解决方案1：设置grid-auto-flow: dense;

这种方式放置元素3后自动放置光标将转到隐式网格中的最开始的行和列行 - 即第2行第1列。

元素6 会发生同样的情况，因此它将被放置在第2行第3列。

html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px 50px;
}

.wrapper div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
}

.wrapper div:nth-child(1) {
  background-color: blue;
  grid-column-start: 1;
  grid-column-end: 3;
}

.wrapper div:nth-child(2) {
  background-color: red;
}

.wrapper div:nth-child(3) {
  background-color: green;
  grid-column-start: 2;
  grid-column-end: 3;
}

.wrapper div:nth-child(4) {
  background-color: lightblue;
  grid-column-start: 2;
  grid-row-end: 4;
}

.wrapper div:nth-child(5) {
  background-color: pink;
}

.wrapper div:nth-child(6) {
  background-color: lightgreen;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

解决方案2：明确定义元素3的行

这样元素3 将被放置在算法的第1步，步骤4将如下所示：

• 在第1行第1-2行中位置元素1 （明确的列位置），自动放置光标移动到第1行第3列。
• 在第1行第3列中位置元素2 （在两个轴上自动定位），自动放置光标移动到第2行第1列，因为只有3列。
• 在第2行第1列中位置元素5 （在两个轴上自动定位），自动放置光标移动到第3行第3列，因为第2行第2列已被占用
• 位置元素6 （两个轴上的自动位置），自动放置光标移动到第3行第1列。

html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px 50px;
}

.wrapper div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
}

.wrapper div:nth-child(1) {
  background-color: blue;
  grid-column-start: 1;
  grid-column-end: 3;
}

.wrapper div:nth-child(2) {
  background-color: red;
}

.wrapper div:nth-child(3) {
  background-color: green;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row: 2;
}

.wrapper div:nth-child(4) {
  background-color: lightblue;
  grid-column-start: 2;
  grid-row-end: 4;
}

.wrapper div:nth-child(5) {
  background-color: pink;
}

.wrapper div:nth-child(6) {
  background-color: lightgreen;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>