设置grid-template-columns未生效，网格元素无法横向排列如何解决？

算力阿峰

2026-9-23

问题排查方向

首要排查：HTML结构嵌套错误
你当前的代码中，第一个.box元素没有正确闭合，剩余3个.box被嵌套在了第一个.box内部。CSS中display: grid仅对父元素的直接子元素生效，所以.boxes容器下只有1个直接子元素（最外层的那个.box），自然只会显示1列，内部的子元素默认纵向堆叠。
修正方式：在第一个.box的<p>标签结束后补充闭合标签</div>，保证4个.box都是.boxes的平级直接子元素，修正后的代码如下：

<section class="boxes">  
  <div class="box">
    <i class="fas fa-chart-pie fa-4x"></i>
    <h3>Analytics</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </div>
  <div class="box">
    <i class="fas fa-globe fa-4x"></i>
    <h3>Marketing</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </div>
  <div class="box">
    <i class="fas fa-cog fa-4x"></i>
    <h3>Development</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </div>
  <div class="box">
    <i class="fas fa-users fa-4x"></i>
    <h3>Support</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </div>
</section>

检查CSS规则是否生效
打开浏览器开发者工具（F12），选中.boxes元素，查看样式面板中display: grid属性是否被更高优先级的CSS规则覆盖（如果属性被划掉就是被覆盖），同时确认类名拼写没有错误。
排除浏览器兼容性问题
如果你使用的是IE10及以下版本的浏览器，grid布局默认不支持，可更换为Chrome、Edge等现代浏览器验证效果。