grid-auto-flow

Question

兼容性

can-i-use-grid-auto-flow ie 不支持

作用

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。
默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行。 这个顺序由 grid-auto-flow 属性决定，默认值是 row ，即"先行后列"。也可以将它设成 column ，变成"先列后行"

grid-auto-flow: column;

• grid-template-rows：定义每一行的行高，值的个数就是行的个数
• grid-template-columns：属性定义每一列的列宽，列的个数由最后 item 的总数决定

例 1

#container {
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}

例 2

#container {
  grid-template-columns: 100px;
  grid-template-rows: 100px 150px 200px;
}

例 3

#container {
  grid-template-columns: 100%;
  grid-template-rows: 100% 100px;
}

此时 1 的宽度为 100% container,所以 3~9 已经超出了 container。
1 的高度为 100px[2 的高度] + 1 的原始高度[内容自动撑起来的高度]。

例 4

#container {
  grid-template-columns: 100%;
  grid-template-rows: repeat(2, 50px 100px);
}

例 5

#container {
   grid-template-columns: repeat(auto-fill, 50px 100px);
}

例 6

#container {
    grid-template-columns: 20px  1fr 2fr;
}

例 7

#container {
    grid-template-columns: 100px auto 100px;
}

2、4、5、6、7、8、9 宽度一致

grid-auto-flow: row dense;

#container {
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-flow: row dense;
}
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;  
}

.item-2 {
  grid-column-start: 2;
  grid-column-end: 4; 
}

grid-auto-flow: column dense;

#container {
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-flow: column dense;
}
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;  
}

.item-2 {
  grid-column-start: 2;
  grid-column-end: 4; 
}