CSS网格布局可能让人感到畏惧。事实上，我已经回避了好几年了，我是一个顽固的flexbox粉丝。
然后，我发现了以下三个强大的网格属性/技术，它们完全改变了我的想法。
1: 切换网格流轴
当我想要对可变宽度的项目进行X轴对齐时，我首先需要这种行为，同时也希望利用grid-gap 。
代码
grid-auto-flow: column;
它的作用
默认的网格流是面向 "行 "布局的，这是对块状布局的补充，其中项目沿Y轴向下流动。
这个代码将默认行为切换为 "列"，即项目默认为沿X轴流动。
需要注意的是
- 项目将占用尽可能多的空间来容纳它们的内容，直到容器的最大宽度，在这一点上，文本将断成新的行。
- 由于网格中缺乏 "包裹 "行为，所以存在溢出的风险，这意味着分配这个属性会使东西沿着X轴流向无限大。
- 这个问题可以通过媒体查询来解决，即只在某一视口宽度以上应用这一行为。
注意：一旦完全支持flexbox
gap，它将可能是这种结果的更好方法，因为它也有包装行为。
何时使用
对于需要可变宽度的简短内容，如导航条或图标列表，当包装不是一个问题或媒体查询可以用来翻转这个属性时。
2.XY中心任何东西
从字面上看，当CSS作为一个话题出现时，每个人都会取笑这个东西。
"你如何让一个div居中？"
Grid有最简单的答案
代码
place-content: center;
它的作用
使任何子内容在垂直方向（Y）和水平方向（X）上居中 🙌
需要注意的事项
- 有一些与分配给子内容的行为有关的麻烦事
- 如果容器的高度不超过子内容的高度，视觉效果可能只是水平居中。
何时使用
任何时候你想让某样东西在垂直和水平方向上居中。
3.本质上响应的网格列
代码#
:root {
--grid-col-breakpoint: 15rem;
}
.grid-columns {
grid-template-columns: repeat(
auto-fit,
minmax(var(--grid-col-breakpoint), 1fr)
);
}
它的作用
repeat() 和minmax() 的唯一网格函数与auto-fit 关键字一起工作，创造了一个结果，即直接的孩子成为等宽的、响应的列。
当网格容器调整大小时，在点击--grid-col-breakpoint 所提供的值时，列开始下降到一个新的虚拟行。
使用--grid-col-breakpoint CSS变量可以通过内联样式来改变这个 "断点"，以适应布局中的各种内容或只用一个类别的组件。
需要注意的是
- 列将始终是等宽的，随着容器大小的变化而增长和收缩，以保持相等。
- 在特定的容器宽度下，有可能出现无主列。
何时使用
如果你需要一个具有等宽列的内在响应的网格。
这种行为也是我们目前可用的两种可行的 "容器查询 "方法之一，因为它响应容器宽度而不是由媒体查询控制。
