使用CSS Grid的必要容器

Question

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

但是我找到了一个非常常见的布局，其中似乎不是这样。

此页面应该有4个区域：页眉，侧面，主页和页脚。但请注意，side和main有不同的背景，那么如何使用CSS网格实现这一点而不为side和main创建容器元素，并将网格转换为header，side + main，footer？

Answer 1

您需要根据 4列网格来考虑这一点...然后将您的div分配给相应的行＆amp;列。

背景可以由maxParallelTrial上的伪元素管理，但我更喜欢包含div的body。同样的效果。

Codepen Demo

Nore info：Breaking Out With CSS Grid Layout

＆＃13;

＆＃13;

page

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

表示

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

总共300px + 640px相当于你的940px＆＃34;容器＆＃34;宽度。这些可以根据您的喜好进行调整。