网格模板列不调整我的网格

Question

我正在尝试进入 HTML 和 CSS，目前正在尝试做一个网站。我想让 4 个盒子并排对齐（就像只有盒子项目的导航栏）。所以我创建了这些框：

HTML:

<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 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>
</div>

CSS:

.boxes{
  display:grid;
  grid-gap:20px;
  grid-template-columns:repeat(4,1fr);
}

出于某种原因，它不会并排移动网格，它们只会向下移动。有人可以给我指路吗？

Answer 1

它给你这个问题是因为你的 HTML 标签没有正确关闭。给你:

.boxes {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
}

<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>

网格模板列不调整我的网格

grid-template-columns doesnt adjust my grids

html

css

css-grid