带css网格的最大宽度答案

【问题标题】：max-width with css grid带css网格的最大宽度
【发布时间】：2018-02-28 08:52:01
【问题描述】：

我想知道 css 网格如何利用最大宽度。在旧的方式中，你会使用一个带有包装类的容器来设置边距。

使用 CSS 网格，根据您创建它们的方式，您不再需要使用容器，有时您无处可添加。

我希望标题是全宽的，但我希望其中的导航具有屏幕分辨率的 80% 的最大宽度，并且自动边距，此代码类似于使用包装容器。问题是，我如何对 side 和 main 执行相同操作，因为它们不在父级内部以设置最大宽度？

body {
    display: grid;
    grid-template-areas: 
    "header header"
    "aside main";
    grid-template-columns: 275px 1fr;
    grid-template-rows: 1fr 1fr;
}

header {
    grid-area: header;
    border: solid 1px black;
}

header > nav {
    max-width: 80%;
    margin: auto;
    border: solid 1px blue;
}

aside {
    grid-area: aside;
}

main {
    grid-area: main;
}

HTML

<html>
    <body>
        <header>
            <nav>nav</nav>
        </header>
        <aside>aside</aside>
        <main>main</main>
    </body>
</html>

如果我必须将它们包装在容器中，这将如何影响网格？如果我在 html 或 body 标签上设置最大宽度，那么我将如何获得一个延伸浏览器整个宽度的标题？

https://jsfiddle.net/6zd3o088/6/

【问题讨论】：

也很有用 - cloudfour.com/thinks/breaking-out-with-css-grid-layout

标签： css css-grid

【解决方案1】：

把它想象成一个四列网格

grid-template-columns: 10% 275px 1fr 10%;

然后根据修改后的网格区域分配您的元素

grid-template-areas: 
"header header header header"
". aside main .";

body {
  display: grid;
  grid-template-areas: "header header header header" ". aside main .";
  grid-template-columns: 10% 275px 1fr 10%;
  grid-template-rows: 1fr 1fr;
  margin: 0;
  padding: 0;
  background: lightgrey;
}

header {
  grid-area: header;
  background:rebeccapurple;
}

header>nav {
  max-width: 80%;
  margin: auto;
  background: lightblue;
}

aside {
  grid-area: aside;
  background: lightgreen;
}

main {
  grid-area: main;
  background: pink;
}

<header>
  <nav>nav</nav>
</header>
<aside>aside</aside>
<main>main</main>

要使用 max-width 和 nav 尊重值，我们必须将 nav 从标题中取出，使其成为网格项。然后我们可以将它对齐到网格 over 标题上。

将minmax 用于内部列，我们可以达到预期的效果

body {
  display: grid;
  grid-template-columns: 1fr minmax(auto, 100px) minmax(auto, 300px) 1fr;
  grid-template-rows: 1fr 1fr;
  margin: 0;
  padding: 0;
  background: lightgrey;
}

header {
  grid-column: 1/-1;
  grid-row: 1;
  background: rebeccapurple;
}

nav {
  grid-column: 2 / 4;
  grid-row: 1;
  background: lightblue;
}

aside {
  grid-column: 2;
  background: lightgreen;
}

main {
  grid-column: 3;
  background: pink;
}

<header></header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>

此处使用较小的列宽进行演示，仅供参考。根据需要修改最大数字。

Codepen

【讨论】：

有道理！谢谢。我应该如何使用最大宽度而不是百分比？
例如。而不是 max-width: 80% in header > nav，我希望最大宽度为 900px。我希望 side 和 main 与导航对齐
Grid- 不能做所有的事情......你所追求的并不是真正的网格......我觉得。还在想。
太棒了！谢谢。这有助于我更好地理解网格。我在stackoverflow.com/questions/49054871/… 上发布了一个相关问题