网格自动流

每天进步一点点

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-auto-flow: dense;
}
 

该示例创建了一个网格容器，该容器可以在每行中容纳 8 个项目，并使用稍后出现且可以容纳空间的较小项目填充任何剩余的可用空间。

grid-auto-flow: column; 
grid-auto-flow: row; 
grid-auto-flow: dense; 
grid-auto-flow: column dense; 
grid-auto-flow: row dense; 
/* same as `dense` */ /* Global values */ 
grid-auto-flow: inherit; 
grid-auto-flow: initial; 
/* same as `row` */ 
grid-auto-flow: revert; 
grid-auto-flow: revert-layer; 
grid-auto-flow: unset;

row

这是默认值。一旦指定，项目将在水平方向布置。Grid 的自动放置算法将通过填充每一行来放置网格项目，并且只会在需要时创建新行。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
  grid-auto-rows: 50px;
}

column

网格项目将按列垂直排列。自动放置算法将通过填充每一列来放置网格项目，并在需要时创建额外的列。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
  grid-template-rows: 50px 50px 50px;
  grid-auto-flow: column;
}

如下图所示，在此示例中，网格将项目放置在列中，一旦没有单元格，它会自动移动到新列，直到没有更多的网格项目。

关键字通过dense允许网格忽略 HTML 来改变这种行为，当它找到一个适合孔的项目时，它将获取该项目 - 无论它是否在 HTML 中的下一个 - 并将其放入那个洞。

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-template-rows: repeat(8, 50px);
  grid-auto-flow: dense;
}
 

可访问性问题

使用该属性时要注意的一件事是算法grid-auto-flow引起的问题。dense

该dense关键字仅更改网格项目的视觉顺序，并且该顺序可能与原始文档顺序不同，这可能会导致某人在键盘上浏览文档或收听正在阅读内容的屏幕阅读器的体验非常糟糕与 HTML 的顺序相同。