网格元素未排列/显示

Question

未获取网格元素 arranged/displayed。我的第 4 篇文章元素根本不显示，后面的所有元素都不可见。我不明白我哪里出错了。我认为为行添加比率并不重要。我试图将它们排列成简单的卡片布局，每行 3 张卡片。提前致谢。

.body {
  width: 80%;
  margin: auto;
  border: 2px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
}

article {
  width: 22vw;
  border: 2px solid black;
  padding: 5px;
}

article img {
  display: block;
  width: 95%;
  margin: auto;
}

article h3 {
  font-size: 100%;
}

article p {
  color: grey;
}

.footer_bottom {
  height: 65vh;
  background-color: rgb(80, 69, 143);
}

.footer_container {
  width: 65%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

<div class="body">
  <article>
    <img src="/1b6912acf44a49c7879a5a42f7691cac.jpg" alt="">
    <div class="content">
      <div class="header">Admin Aug 17, 2020 2 min</div>
      <h3>The importance of the designer notebook</h3>
      <p>Create a blog post subtitle that summarizes your post in a few short, punchy sentences and entices your audience to continue reading..</p>
      <div class="footer"></div>
    </div>
  </article>

  <article>
    <img src="/1b6912acf44a49c7879a5a42f7691cac.jpg" alt="">
    <div class="content">
      <div class="header">Admin Aug 17, 2020 2 min</div>
      <h3>The importance of the designer notebook</h3>
      <p>Create a blog post subtitle that summarizes your post in a few short, punchy sentences and entices your audience to continue reading..</p>
      <div class="footer"></div>
    </div>
  </article>

  <article>
    <img src="/1b6912acf44a49c7879a5a42f7691cac.jpg" alt="">
    <div class="content">
      <div class="header">Admin Aug 17, 2020 2 min</div>
      <h3>The importance of the designer notebook</h3>
      <p>Create a blog post subtitle that summarizes your post in a few short, punchy sentences and entices your audience to continue reading..</p>
      <div class="footer"></div>
    </div>
  </article>

  <article>
    <img src="/1b6912acf44a49c7879a5a42f7691cac.jpg" alt="">
    <div class="content">
      <div class="header">Admin Aug 17, 2020 2 min</div>
      <h3>The importance of the designer notebook</h3>
      <p>Create a blog post subtitle that summarizes your post in a few short, punchy sentences and entices your audience to continue reading..</p>
      <div class="footer"></div>
    </div>
  </article>
  
  <article>
    <img src="/1b6912acf44a49c7879a5a42f7691cac.jpg" alt="">
    <div class="content">
      <div class="header">Admin Aug 17, 2020 2 min</div>
      <h3>The importance of the designer notebook</h3>
      <p>Create a blog post subtitle that summarizes your post in a few short, punchy sentences and entices your audience to continue reading..</p>
      <div class="footer"></div>
    </div>
  </article>
</div>

<div class="footer_bottom">
  <div class="footer_container">
    <div class="about">
      ABOUT FEEDs & GRIDs I'm a paragraph. Click here to add your own text and edit me. It’s easy=.
    </div>
    
    <div class="socials">
      own text and edit me. It’s easy. Just click “Edit Text” or dry and let your users know a little more about you.

      <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
      </ul>
    </div>

    <div class="subscribe">
      SUBSCRIBE
      
      <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
      </ul>
    </div>
  </div>
</div>

Answer 1

这个 codepen 可能是您要找的东西？您的问题可能是在 article 上设置了宽度，这最终会弄乱网格的宽度。他们最终互相摔跤。

使用网格时，我通常不会指定它正在处理的 'cards' 的 width/height。我让网格完成这项工作。

我在你的代码中添加了一些 margin/padding 以获得更好的外观。

我还去掉了 .body 的宽度，因为你没有使用（至少现在还没有）媒体查询，让网格处理响应部分可能（再次）更好.因此，如果您 expand/shrink 屏幕，卡片将相应排列。

Answer 2

Golive服务器似乎有问题，当我重新启动服务器时问题似乎已解决，无论如何谢谢大家

网格元素未排列/显示

grid elements not getting arranged / displayed

html

css

css-grid