具有最大宽度，居中内容的CSS网格布局

Question

我正在学习CSS Grid（我早该知道了）。我已经挑战自己将相对标准的基于浮点的布局转换为网格，但无法弄清最后一部分。

我的目标是将内容（徽标+导航和侧边栏+内容）居中放置在布局中，并带有max-width。例如，徽标+导航应该具有max-width600px。我还要求有一个填充背景的实心填充背景（与可变高度徽标/导航行的高度匹配）。

第一列（徽标和边栏）应缩小以适合其内容-因此，第一列的宽度仅与徽标/边栏之间的宽度相同。导航/内容应填充所允许的剩余空间max-width。

以下是我的最佳尝试。主要内容的宽度未填充max-width。而是，主要内容的宽度是徽标的宽度+ 250px（由网格列定义的宽度）。

我希望实现的是-将max-width徽标+导航的定义为特定宽度（例如600px），并缩小徽标列以适合其内容。

body {
  margin: 40px;
}

.fill {
  grid-column-start: 1;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 1;
  background-color: gray;
}

.logo {
  grid-area: logo;
  font-size: calc(1rem + 4vw);
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.nav {
  grid-area: nav;
  text-align: right;
}

.footer {
  grid-area: footer;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto min-content 120px 120px auto;
  grid-template-areas: "... logo nav nav ..." "... sidebar content content ..." "... footer  footer  footer ...";
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
}

.header,
.footer {
  background-color: #999;
}

<div class="wrapper">
  <div class="fill"></div>
  <div class="box logo">Logo</div>
  <div class="box nav">Nav</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box content">Content
    <br /> More content than we had before so this column is now quite tall.</div>
  <div class="box footer">Footer</div>
</div>

CSS Grid可以做到这一点吗？

Answer 1

您可以有一个 2 列网格，以便grid-template-columns: auto 1fr第一列占据其内容的宽度（与徽标/侧边栏之间的宽度一样宽），第二列占据剩余空间（请注意，我已设置max-width: 600px为网格容器）。

我还要求有一个覆盖视口全宽的实心填充背景（与可变高度徽标/导航行的高度相匹配）

为此，您可以执行以下操作：

1. 首先通过设置和属性来修复 第一行中的logo和navgrid-rowgrid-column

2. 现在使用伪元素来wrapper重叠第一行（但使用属性堆叠z-index在下面）。

3. margin-left将属性设置calc(-50vw + 50%)为100vw 以在整个视口中width拉伸实心填充背景。

请参阅下面的演示：

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto 1fr; /* 2-column grid */
  /* background-color: #fff;*/
  color: #444;
  max-width: 600px; /* max-width of the layout */
  margin: 0 auto; /* center in the viewport */
}
.logo {
  font-size: calc(1rem + 4vw);
  grid-row: 1; /* fix the logo in the first row */
  grid-column: 1; /* fix the logo in the first column */
}
.nav {
  text-align: right;
  grid-row: 1;  /* fix the nav in the first row */
  grid-column: 2;  /* fix the nav in the second column */
}

.footer {
  grid-column: span 2; /* footer spans the two columns */
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
}

.header,
.footer {
  background-color: #999;
}

.wrapper:after { /* position this in the first row */
  content: '';
  display: block;
  grid-row: 1;
  grid-column: 1/ 3;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: gray;
  z-index: -1; /* push it behind the first row */
}

<div class="wrapper">
  <div class="box logo">Logo</div>
  <div class="box nav">Nav</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box content">Content
    <br /> More content than we had before so this column is now quite tall.</div>
  <div class="box footer">Footer</div>
</div>