CSS Grid中grid-template-areas的占位符.为何无法生成空白？

你的Grid布局思路是对的：用grid-template-columns定义左右20px的空列，再通过grid-template-areas的.将这些空列标记为未使用区域。但没看到预期空白，大概率是以下几个原因之一：

1. Grid项的display属性导致视觉错位 #

你给.nav li设置了display: inline，这会把Grid容器的直接子元素（li）变成行内元素。虽然Grid项依然会占据对应的网格区域，但行内元素无法被拉伸填充整个网格区域的宽度，再加上text-align: center，可能让你误以为左右的空列不存在。

解决办法：
去掉.nav li的display: inline，让li保持Grid项的默认块级表现（Grid容器的直接子元素自动成为Grid项，默认是display: block），这样li会自动填充对应的1fr网格区域，左右的20px空列会清晰显示：

.nav li {
 list-style: none;
 padding: 0;
 margin: 0;
 /* 移除display: inline */
 text-decoration: none;
}

2. Grid容器的宽度计算方式问题 #

你的.nav设置了width: 100%，如果父元素（比如<nav id="navigation">）存在默认的padding/margin，或者浏览器的默认box-sizing行为影响，可能导致左右的20px空列被挤压或与外部边距重合。

解决办法：
给Grid容器加上box-sizing: border-box，确保宽度计算包含内边距和边框（如果后续添加的话），同时可以显式清除父元素的默认边距：

.nav {
 /* padding: 1rem 1.75rem 0.1rem 1.75rem;*/
 text-align: center;
 font-size: 2rem;
 display: grid;
 width: 100%;
 box-sizing: border-box; /* 添加这行 */
 grid-template-columns: 20px 1fr 1fr 1fr 1fr 20px;
 grid-template-areas: ". main blog work contact .";
 /* grid-gap: 20px;*/
}

#navigation {
 margin: 0; /* 清除nav的默认margin */
 padding: 0;
}

3. 对Grid占位符.的预期理解偏差 #

你可能以为.会生成容器外部的空白（类似margin），但实际上Grid的.是定义容器内部的空网格列/行，空白是在容器内部的。如果想要容器外部的左右空白，应该给.nav添加左右padding，而不是用Grid空列：

.nav {
 padding: 0 20px; /* 替换Grid的左右空列，直接加padding */
 text-align: center;
 font-size: 2rem;
 display: grid;
 width: 100%;
 box-sizing: border-box;
 grid-template-columns: 1fr 1fr 1fr 1fr; /* 去掉左右20px列 */
 grid-template-areas: "main blog work contact"; /* 去掉左右的. */
}

验证修改后的效果 #

修改后，你的导航栏会在左右呈现20px的空白，四个链接均匀分配剩余宽度，完全符合预期布局。

内容的提问来源于stack exchange，提问作者Jamie Kane