CSS GridQuery 可以在面向列的网格中创建蛇形单元格模式吗？

带有 CSS 网格的蛇线网格

查询：在面向列的 CSS 网格中生成蛇状单元格模式是否可行，类似于下面的例子？

    01 06 07 12
    02 05 08 11
    03 04 09 10

解决方案：

假设网格总是有三行，这是一个聪明的解决方案：

<code class="css">.container {
  display: grid;
  grid-template-rows: 20px 20px 20px;
  grid-auto-columns: 20px;
  grid-auto-flow: column dense;
}

.container > div:nth-child(6n + 4) { grid-row: 3; }
.container > div:nth-child(6n + 5) { grid-row: 2; }

/* Cosmetic styles */
.container {
  grid-gap: 5px;
  counter-reset: num;
  margin: 10px;
}

.container > div {
  border: 1px solid;
}
.container > div:before {
  content: counter(num);
  counter-increment: num;
}</code>

关键这个解决方案是 nth-child() 选择器，它根据子元素在父元素中的位置来选择子元素。 grid-auto-flow: 列密集使元素保持密集的列结构。

当您想要蛇形填充模式的灵活性但又不必定义每个列时，此技术特别有用手动单个单元格的位置。

以上是CSS GridQuery 可以在面向列的网格中创建蛇形单元格模式吗？的详细内容。更多信息请关注PHP中文网其他相关文章！