特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)
在第二部分中主要介绍了如何使用display来创建网格容器和网格项目，以及怎么使用 grid-template-columns、grid-template-rows 和 grid-template-areas 定义显式网格。在这部分（Part3）将和大家探讨如何设置网格轨道尺寸？简单地说，在grid-template-columns 和 grid-template-rows 中可以显式设置网格轨道大小（列宽和行高），而且设置大小的方式有很多种方式，比如使用不同的长度单位，使用关键词，使用CSS函数等来设置网格轨道大小。如果你感兴趣的话请继续往下阅读。
网格轨道尺寸的设置
CSS 网格布局中轨道的设置有很多种选择，也正如此，我们在定义网格轨道的时候应该掌握什么时候使用什么？接下来我们就围绕着这个话题来展开。
从前面的内容中可以知道，在网格布局中可以使用 grid-template-columns和grid-template-rows为显式的设置网格轨道。在这两个属性中我们可以设置不同的值，大致有三种类型的值：
- 带有不同单位的的长度值，比如我们熟悉的
px、em、rem、vw、vh、%，不怎么常用的ch、ex，还有网格布局中独有的单位fr等 - 关键词，比如
none、auto、min-content和max-content等 - CSS函数，比如
fit-content()、minmax()、repeat()、min()、max()和clamp()等
我们先从熟悉的单位开始。
px
从《图解CSS：CSS 的值和单位》一文中，可以得知，px是一个固定单位，也是常用的一个<length>值单位。只要你需要设置一个固定尺寸的轨道时，就应该使用px单位。假设我们要构建一个固定宽度的三列布局（如200px，520px，200px），可以像下面这样使用：
.container {
display: grid;
gap: 20px;
grid-template-columns: 200px 520px 200px;
}
基于上面这个示例的方式，我们可以非常容易的构建出类似于960gs的固定网格：
/*
* 1. Container's width is 960px
* 2. Gutter's width is 20px
* 3. Column's width is 60px
* 4. Left padding of the container is 10px
* 5. Right padding of the container is 10px
* width = 60 x 12 + (12 - 1) * 20 + 10 + 10 = 960
*/
.container {
width: 960px;
padding-left: 10px;
padding-right: 10px;
display: grid;
gap: 20px;
grid-template-columns: 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px 60px;
}
如果你在所有的轨道中的值都使用px的话，那该布局就是一个固定布局，不具适应性（不会有很好的响应）。
rem
使用rem单位来设置网格轨道和px有点相似，不同的是rem单位他会根据<html>元素的font-size来确定大小。也就是说，使用rem时，网格轨道大小是根据<html>元素的font-size来确定大小。默认情况之下，<html>的font-size是16px，那么1rem就等于16px。而且，当font-size调整大小时，网格轨道大小也会随着其大小做出相应的调整：
html {
--font-size: 16px;
font-size: var(--font-size);
}
.grid__container {
display: grid;
gap: 1rem;
grid-template-columns: 10rem 15rem 20rem;
}
尝试着拖动示例中的滑块改变<html>的font-size的值，会看到网格轨道在小也会随着改变：
在CSS中，rem单位是创建响应式布局的法宝，可以在用户的设备变宽时增加字体大小，比如 《使用Flexible实现手淘H5页面的终端适配》介绍的适配方案，就是在不同宽度的设备会调整<html> 的font-size的值。换句话说，网格轨道中使用rem结合媒体查询调整（在不同条件下）<html>的font-size可以调整网格轨道尺寸，比如下面这个示例：
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
html {
font-size: 12px;
}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
html {
font-size: 32px;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
html {
font-size: 40px;
}
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
html {
font-size: 50px;
}
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
html {
font-size: 32px;
}
}
.grid__container {
display: grid;
gap: 0.5rem;
grid-template-columns: 5rem 5rem 5rem 5rem;
}
调整浏览器视窗宽度大小，会使用对应媒体查询条件下的font-size，相应的网格轨道尺寸也会相应调整：
除此之外，使用CSS的比较函数clamp()函数，不依赖CSS媒体查询，使<html>的font-size选择合适的值，比如：
html {
font-size: clamp(16px, 5vw, 50px);
}
甚至可以根据《CSS中的动态计算》提供的 CSS锁方案，可以变得更为灵活：
:root {
/* 840px相对于16px计算出来的rem值 */
--maxViewportWidth: 52.5;
/* 360px相对于16px计算出来的rem值 */
--minViewportWidth: 22.5;
/* 最小字号font-size的 rem值 */
--minFontSize: 1;
/* 最大字号font-size的 rem值 */
--maxFontSize: 3.5;
--f-slope: (
(var(--maxFontSize) - var(--minFontSize)) /
(var(--maxViewportWidth) - var(--minViewportWidth))
);
--yAxisIntersection: (
-1 * var(--minViewportWidth) * var(--f-slope) + var(--minFontSize)
);
--clamp: clamp(
var(--minFontSize) * 1rem,
var(--yAxisIntersection) * 1rem + (var(--f-slope) * 100vw),
var(--maxFontSize) * 1rem
);
}
html {
font-size: var(--clamp);
}
.grid__container {
display: grid;
gap: 0.5rem;
grid-template-columns: 5rem 5rem;
}
在不同视窗宽度下，html的font-size就会相应调整（没有任何媒体查询条件），网格轨道也就相应调整了大小：
em
em 的单位就像 rem 一样，只不过它不是相对于 <html> 的font-size计算，而是相对于其父容器的font-size来计算：
em 的计算相对于 rem 来说要复杂的多，这也是我不喜欢使用 em 单位的主要原因。不过，em 有着rem的优势，如果元素的其他属性，比如border-width、padding、width等属性的值使用em，那么调整其父元素的font-size时，使用em相关的属性也会相应调整：
也就是说，如果网格轨道的值使用em，也可以达到类似rem的效果，只不过计算方式不同而以。把上面的rem
如需转载，烦请注明出处：https://www.w3cplus.com/css/grid-layout-part-3.html
如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！
