Question

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

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

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

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

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

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

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

我还要求有坚实的背景填充视口的全角（与变量的高度匹配）高度徽标/导航行）

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

logo

nav

第一个 fix grid-row和grid-column
< / li>
现在对与第一行重叠的wrapper使用伪元素（但下面使用z-index属性将 stacked 覆盖）。
将margin-left属性设置为calc(-50vw + 50%)，将width属性设置为100vw，以在视口中拉伸纯色填充背景。

请参见下面的演示

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对齐属性：

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

最大宽度

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

.wrapper {
  flex: 600px 0 1;
}

此规则如下：

flex-basis: 600px（起始宽度）
flex-grow: 0（该项不能扩展到600像素以上）
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>

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

2 个答案:

居中

最大宽度

2列布局