CSS 网格的必要容器

Question

CSS 网格的主要卖点之一是它消除了容器 DIV。

但我发现了一个非常常见的布局，但在其中这似乎不是真的。

此页面应该有 4 个区域：页眉、侧边、主体和页脚。但是请注意，side 和 main 有不同的背景，那么在不为 side 和 main 创建容器元素并将网格变成 header、side+main、footer 的情况下，如何使用 CSS grid 实现呢？

Answer 1

您需要根据 4 列 网格来考虑...然后将您的 div 分配给适当的行和列。

背景可以由 body 上的 pseudo-element 管理，尽管我更喜欢包含 div 的 page。同样的效果。

Codepen Demo

更多信息：Breaking Out With CSS Grid Layout

.page {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 1fr 100px 300px 1fr;
  grid-template-rows: min-content 1fr min-content;
  grid-gap: .5em;
}

.page::before {
  content: "";
  grid-column: 1 / 5;
  grid-row: 2 / 3;
  z-index: -2;
  background: pink;
}

header {
  background: red;
  padding: 1em 0
}

footer {
  background: blue;
  padding: 1em 0;
}

aside {
  background: green;
}

main {
  background: rebeccapurple;
}

header,
footer {
  grid-column: 2 / 4;
}

aside {
  grid-column: 2 / 3;
  grid-row: 2;
}

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

<div class="page">
  <header>HEADER-CONTENT</header>
  <aside></aside>
  <main></main>
  <footer>FOOTER CONTENT</footer>
</div>

在这种情况下，我替换了不同的宽度 用于演示目的...

grid-template-columns: 1fr 100px 300px 1fr;

说

grid-template-columns: 1fr 300px 640px 1fr;

其中 300px + 640px 的总和等于您的 940px "container" 宽度。这些可以根据您的喜好进行调整。

CSS 网格的必要容器

Necessary containers with CSS Grid

html

css

css-grid