CSS Grid疑难：网格项目内边距引发布局溢出问题

嘿，我之前也踩过一模一样的坑！这其实是CSS默认盒模型在背后搞的鬼，跟Grid本身没啥关系~

问题根源 #

默认情况下，CSS的box-sizing属性值是content-box，这意味着你给元素设置的width只是内容区域的宽度，当你添加padding时，padding会被加到内容宽度的外面，导致元素的总宽度 = 内容width + padding + border。而你的Grid列用1fr分配的是内容区域的空间，加了padding后元素总宽度就超过了网格列的宽度，自然就溢出了。

解决方案 #

只需要给表单里的输入元素加上box-sizing: border-box，让元素的width包含padding和border即可。

修改后的CSS代码如下：

#email { 
  display: grid; 
  grid-gap: 2rem; 
  grid-template-areas: 
    "name address" 
    "message message" 
    "send send"; 
  grid-template-columns: 1fr 1fr; 
  justify-items: start; 
  margin: 1rem auto 0 auto; 
  width: 80%; 
} 
#form-name { grid-area: name; } 
#form-address { grid-area: address; } 
#form-message { grid-area: message; } 
.form-group * { 
  display: block;
  box-sizing: border-box; /* 关键：让width包含padding和border */
} 
#form-name, #form-address, #form-message { width: 100%; } 
#name-field, #address-field, #message-field { width: 100%; } 
#name-field, #address-field, #message-field { padding: 0.75rem 1.5rem; }

额外小建议 #

如果你不想每次都单独给元素加这个属性，可以在全局样式里设置：

* {
  box-sizing: border-box;
}

这样所有元素都会使用border-box盒模型，能避免很多类似的布局溢出问题，现在很多前端项目都会默认这么设置~

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