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

Question

我正在尝试在另一个 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> 

Answer 1

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