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

Question

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

我的目标是在内容（徽标 nav和侧栏 内容）中以max-width为中心的布局。例如，徽标 导航应具有600px的max-width。我还需要具有覆盖视口的全宽度的实心填充背景（与可变高度徽标/导航行的高度匹配）。

第一列（徽标和侧栏）应收缩以适合其内容 - 因此，第一列仅与徽标/侧栏之间的宽度一样宽。然后，NAV/内容应填充max-width允许的剩余空间。

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

我希望实现的目标是 - 将徽标 nav的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网格是否可以使用，如果是，如何？

Answer 1

您可以使用 grid-template-columns: auto 1fr具有2个列 grid ，以便第一列 将其内容的宽度（）与徽标/侧栏）和第二列之间的宽度一样宽（请注意，请注意我已将max-width: 600px设置为 GRID容器）。

我还需要拥有固体填充背景覆盖 视口的全宽度（与变量的高度匹配 高度徽标/导航行）

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

1. first fix logo和nav在第一行中设置grid-row和grid-column属性

2. 现在使用 pseudo元素用于wrapper重叠第一行（但是以下使用z-index属性

堆叠

3. 将margin-left设置为calc(-50vw + 50%)和width作为100VW，以拉伸整个视口 solid填充背景。

请参见下面的演示：

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>

Answer 2

中心

水平居中网格容器相对简单。在父上使用flex Alignment属性：

body {
  display: flex;
  justify-content: center;
}

---

最大宽度

您可以使用max-width或flex属性在网格容器上创建最大宽度。

.wrapper {
  flex: 600px 0 1;
}

该规则说：

• flex-basis: 600px（起始宽度）
• flex-grow: 0（该项目不能扩展超过600px）
• flex-shrink: 1（项目可以缩小）

此命令本质上等同于max-width: 600px。

---

2列布局

您写道：

第一列（徽标和侧栏）应收缩以适合其内容 - 因此，第一列仅与徽标/侧栏之间的宽度一样宽。然后，导航/内容应填充最大宽度允许的剩余空间。

尝试以下操作：

.wrapper {
  flex: 600px 0 1;
  display: grid;
  grid-template-columns: min-content 1fr;
}

body {
  margin: 40px;
  display: flex;
  justify-content: center;
}
.wrapper {
  flex: 600px 0 1;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: min-content 1fr;
  grid-template-areas: "logo  nav" 
                       "sidebar content" 
                       "footer footer";
  background-color: #fff;
  color: #444;
}
.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;
}
.fill {
  background-color: gray;
}
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
}
.header,
.footer {
  background-color: #999;
}

<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 /> These lines wrap when the text hits 600px maximum width. These lines wrap when the text hits 600px maximum width. These lines wrap when the text hits 600px maximum width. These lines wrap when the text hits 600px maximum width. These lines wrap when the text hits 600px maximum width. These lines wrap when the text hits 600px maximum width.</div>
  <div class="box footer">Footer</div>
</div>