页面标题的 CSS 网格突破

Question

我是 css 网格的新手（以前一直使用 flexbox），我正在尝试找出如何为我的页面标题打破 css 网格。我的网站结构如下所示：

这是css：

.site {
  column-gap: $sidebar-gap;
  display: grid;
  grid-template-columns: auto ($sidebar-width);   // site structure
  grid-template-rows: auto 1fr auto;              // sticky header & footer
  grid-template-areas:
    "header header"
    "main sidebar"
    "footer footer";
}

header {
  grid-area: header;
}

.site-main {
  grid-area: main;
}

.widget-area {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}

我的 HTML 结构如下所示：

body
└── div (#page .site)
    ├── header (#masthead .site-header)
    |   ├── div (.site-branding)
    |   |   ├── a (.logo)
    |   |   └── p (.site-description)
    |   ├── nav (#site-navigation .main-navigation)
    |   |   ├── button (.menu-toggle)
    |   |   ├── div (#menu-desktop-container .menu-desktop-container)
    |   |   └── div (#menu-mobile-container .menu-mobile-container)
    |   └── div (.head-search)
    |
    ├── main (#primary .site-main)
    |   └── article (.module)
    |       ├── div (.page-head)
    |       |   ├── h1 (.page-title)
    |       |   └── div (.page-meta)
    |       └── div (.page-content)
    |           └── <page content goes here>
    |
    ├── aside (#secondary .widget-area)
    |   └── <content> (section)
    |
    └── footer (#colophon .site-footer)
        ├── div (.footer-widgets)
        ├── nav (.footer-navigation)
        |   └── div (#menu-footer-container .menu-footer-container)
        └── div (.site-info)

我想要实现的是 .page-head div 突破 css 网格并跨越页面的整个宽度。从这里开始，我希望侧边栏（即.widget-area）在.page-head 下方开始。通常在过去使用 flexbox 时，我会在具有固定高度的 .page-head 上使用 position: absolute 来实现这一点。然后我只需将margin-top 添加到.widget-area 以与.page-head 站点相同。

我在 CSS 网格中尝试过这个，但它不起作用。我已经进行了大量的研究，但我似乎无法弄清楚这一点。我确信在这一点上我现在只是在追逐我的尾巴，所以任何帮助将不胜感激。这就是我试图在视觉上实现的目标：

请注意，我无法更改 HTML 结构 - 即显而易见的事情是将侧边栏 (.widget-area) 移动到主 (.site-main) 内，那么这将非常容易实现。因为这是一个 Wordpress 主题，所以这是不可能的。

我敢肯定，一定要实现这一目标，我只是还没有得到它：D。提前致谢！任何帮助将不胜感激，我在这里拔头发。

Answer 1

您可以使用网格内的网格来完成此操作：

为了确保布局符合您的要求，我使用了您的 codepen 的 html。

测试下面的sn-p：

.site {
  column-gap: 40px;
  display: grid;
  grid-template-columns: auto (25%);
  grid-template-rows: auto 3rem 1fr auto;
}

header {
  grid-row: 1;
  grid-column: 1 / 3;
}

.site-main {
  grid-row: 2 / 4;
  grid-column: 1 / 3;
}

.widget-area {
  grid-row: 3;
  grid-column: 2;
}

footer {
  grid-row: 4;
  grid-column: 1 / 3;
}
article {
  display: grid;
  column-gap: 40px;
  grid-template-columns: auto (25%);
  grid-template-rows: 3rem 1fr;
  width: 100%;
  height: 100%;
}

.page-head {
  grid-column: 1 / 3;
  grid-row: 1;
  text-align: center;
}
.page-content {
  grid-column: 1;
  grid-row: 2;
}
.site {
  padding: 0 10px;  
}

header,
footer {
  background-color: grey;
  color: white;
  padding: 50px 0;
  text-align: center;
}

header {
  margin-bottom: 40px;
}

footer {
  margin-top: 40px;
}

.page-content {
  border: 1px solid blue;
}

h1 {
  border: 1px solid red;
  margin: 0;
  padding: 0;
}

.widget-area {
  border: 1px solid green;
  
  .module {
    margin-bottom: 20px;
  }
}

<div class="site">
  <header>Header</header>
  
  <main class="site-main">
    <article class="module">
      <div class="page-head">
        <h1>Page Title</h1>
      </div>
      <div class="page-content">
      </div>
    </article>
  </main>
  
  <aside class="widget-area">
    <div class="module">Widget 1</div>
    <div class="module">Widget 2</div>
    <div class="module">Widget 3</div>
  </aside>

  <footer>Footer</footer>
</div>

或在此处查看 Codepen：https://codepen.io/BSO__/pen/ZEXvgXR