Question

我真的很陌生（我只有一个月的时间学习HTML和CSS，我刚刚发现了这个很棒的网站），我正努力学习编码，特别是因为我和＃39;我试图谋生。

反正。我想知道如何在网格中组织特定元素？

我使用CSS网格创建了一个基本模板，但我想知道如何在网格中移动这些元素。

这是我创建的codepen（链接如果不起作用link to codepen：

<p data-height="449" data-theme-id="0" data-slug-hash="VyWamp" data-default-tab="css,result" data-user="Fry-Szopen" data-embed-version="2" data-pen-title="Learning CSS grid." data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/Fry-Szopen/pen/VyWamp/">Learning CSS grid.</a> by Erwin Velasquez Jimenez (<a href="https://codepen.io/Fry-Szopen">@Fry-Szopen</a>) on <a href="https://codepen.io">CodePen</a>.</p>

抱歉，如果这个问题很愚蠢，但我真的很新，还有这一切。提前谢谢。

Answer 1

好的，@ fry Szopen，如果你使用CSS Grid组织div，那些div（也是子div）的元素不遵循css网格，所以你可以将它们视为任何普通的div。

您可以在这些子div中使用任何显示属性。如下伪代码

    <div class="parent">
      <div class="child1">
            <div class="grand-child"></div>
            <div class="grand-child"></div>
      </div>
      <div class="child2">
            <div></div>
            <div></div>
      </div>
      <div class="child3">

      </div>
</div>

，CSS可以是 -

.parent{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
}
.child1{
      display: inline-block;
}
.child2{
      display: grid;
      grid-template-rows: 1fr 1fr;
}

我已在codepen中修改了您的代码段。

如何在网格中排列特定元素？

1 个答案: