用于页面标题的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下面。通常，在过去，当使用柔性盒时，我会实现这一点，在具有固定高度的position: absolute上使用.page-head。然后，我只需将margin-top添加到.widget-area中，使其与.page-head站点相同。

我在CSS网格中尝试过这一点，但这不起作用。这就是我想要达到的视觉效果：

​

​

我无法更改HTML结构--即很明显的事情是将侧边栏(.widget-area)移动到main (.site-main)中，然后这将是非常容易实现的。因为这是一个Wordpress主题，这是不可能的。

Answer 1

您可以在网格中使用网格来完成它，这将完成以下工作：

​

​

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

测试下面的代码片段：

​

.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>

​

或者查看这里的代码：https://codepen.io/BSO__/pen/ZEXvgXR