3 种 CSS 网格技术助你成为网格转换者

这是系列文章的第十五篇，该系列文章探讨了过去 13 多年来我作为前端开发者所遇到的各种问题，并提出了相应的解决方案。访问ModernCSS.dev可以查看整个系列文章及其他资源。

CSS 网格布局可能让人望而生畏。事实上，我曾经有好几年都避免使用它，并且一直是Flexbox 的忠实粉丝。

然后我发现网格中有以下 3 个强大的属性/技术，它们彻底改变了我的想法。

剧透一下，这里有一条包含所有内容的推文。继续阅读，了解更多信息！

斯蒂芬妮·埃克尔斯

@5t3ph

我最喜欢的 3 个#CSS网格元素：

1⃣ 切换网格流轴：
grid-auto-flow: column；

2⃣ 使用 grid + 将任何内容 XY 居中：
place-content: center；

3⃣ 内在响应的网格列：
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr))；

5t3ph.dev/favgrid

2020年6月27日下午15:22

1：切换网格流轴

当我想要可变宽度项目的 X 轴对齐时，我第一次想要这种行为，并且还希望利用grid-gap。

代码

grid-auto-flow: column;

它的作用

默认网格流面向“行”布局，这与块布局互补，其中项目沿 Y 轴向下流动。

这会将默认行为切换为“列”，这意味着项目默认沿 X 轴流动。

注意事项

• 项目将占用尽可能多的空间来容纳其内容，直到达到容器的最大宽度，此时文本将换行
• 由于网格缺乏“包裹”行为，存在溢出的风险，这意味着分配此属性将使事物沿着 X 轴流动到无穷大
  • 可以通过媒体查询将此行为应用于特定视口宽度以上来解决

注意：一旦 flexboxgap得到完全支持，由于还具有换行行为，它可能是实现此结果的更好方法

何时使用

对于需要可变宽度的短内容（例如导航栏或图标列表），并且当包装不是问题时，可以使用媒体查询来翻转此属性。

2. XY 中心任意

每次谈到 CSS 时，大家就会拿它开玩笑：

“如何让 div 居中？”

Grid 有最简单的答案！

嘘——对居中布局的各种解决方案感兴趣？快来看看“ CSS 居中布局完全指南”吧！

代码

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-breakpointCSS 变量可以通过内联样式改变这个“断点”，以适应布局内或仅具有单个类的组件之间的各种内容。

注意事项

• 列的宽度始终相等，随着容器尺寸的伸缩，列也会随之增大和缩小以保持相等
• 在某些容器宽度下，可能存在孤立列

请参阅“替换 12 列网格的解决方案”中更全面的解释

何时使用

如果您需要具有等宽列的内在响应网格。

这种行为也是我们当前可用的两种可行的“容器查询”方法之一，因为它响应容器宽度而不是由媒体查询控制。

了解有关使用网格进行容器查询的更多信息>

演示

此 CodePen 演示了所有 3 种技术：

查看我的Egghead 课程，进一步探索这些网格技术