另一个CSS网格内的CSS网格显示为父网格

桑德曼

我正在尝试在另一个css网格中创建一个css网格，就像它的父网格一样。内部网格的大小要小20和100像素，但不会像父网格一样对齐。请检查出码笔。谢谢。

CODEPEN：https：//codepen.io/centem/pen/oNvZLgP ？ editors = 1100

<div class="grid-page">
  <div class="header">
    <div>HOME</div>
    <div>SEARCH</div>
    <div>LOGOUT</div>
  </div>
  <div class="menu">MENU</div>
  <div class="content">
    <div class="inner-grid">
      <div class="inner-header">
        <div>HOME</div>
        <div>SEARCH</div>
        <div>LOGOUT</div>
      </div>
      <div class="inner-menu">MENU</div>
      <div class="inner-content">
        CONTENT
      </div>
      <div class="inner-footer">FOOTER</div>
    </div>
  </div>
  <div class="footer">FOOTER</div>
</div>

DevLasting

将类inner-grid替换为inner-grid-page。没有为内部网格类定义CSS，但是我可以看到为内部网格页面定义的网格。让我知道是否有效

<div class="grid-page">
  <div class="header">
    <div>HOME</div>
    <div>SEARCH</div>
    <div>LOGOUT</div>
  </div>
  <div class="menu">MENU</div>
  <div class="content">
    <div class="inner-grid-page">
      <div class="inner-header">
        <div>HOME</div>
        <div>SEARCH</div>
        <div>LOGOUT</div>
      </div>
      <div class="inner-menu">MENU</div>
      <div class="inner-content">
        CONTENT
      </div>
      <div class="inner-footer">FOOTER</div>
    </div>
  </div>
  <div class="footer">FOOTER</div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。