最近，我使用创建了一个布局CSS grid https://www.w3.org/TR/css-grid-1/。虽然这很有效，但我对它的工作原理感到困惑。具体来说，我对这条线感到困惑grid-template-rows: auto auto 1fr auto;.
这里最终发生的是页眉和页脚根据内容调整大小，这是有道理的，因为它们跨越了页面的宽度。文章本身根据其内容调整大小。但是，“标题”和“导航”被分开，标题根据内容调整大小，而导航占据其余空间。
如果我用过grid-template-rows: auto auto auto auto;相反，标题和导航将共享相同的间距，这不是我想要的。
怎么样auto auto 1fr auto解释以便它给我调整大小，使标题占据所需的最小空间，而导航占据其余空间？在这种情况下“fr”和“auto”如何交互？
main {
display: grid;
grid-template-columns: 10rem auto;
grid-template-rows: auto auto 1fr auto;
grid-template-areas: "header header" "title article" "nav article" "footer footer";
}
header {
grid-area: header;
background: lightblue;
}
div {
grid-area: title;
background: orange;
}
nav {
grid-area: nav;
background: pink;
}
article {
grid-area: article;
background: yellow;
}
footer {
grid-area: footer;
background: lightblue;
}
<main>
<header>This is the header</header>
<div>This is the title</div>
<nav>This is the nav</nav>
<article>
This is the article. This is the article. This is the article. This is the article.
This is the article. This is the article. This is the article. This is the article.
This is the article. This is the article. This is the article. This is the article.
This is the article. This is the article. This is the article. This is the article.
This is the article. This is the article. This is the article. This is the article.
This is the article. This is the article. This is the article. This is the article.
</article>
<footer>This is the footer</footer>
</main>
作为一个经验法则，
当浏览器渲染你的网格时，first它计算了必要的尺寸auto元素 - 他们都得到了他们可以忍受的最低限度 - 并且then，在知道所有其他大小后，它会将剩余空间分配给fr细胞。分配的工作方式很明显：将数字相加，切分蛋糕，给每个人所要求的金额。就像，你有1fr, 1fr, 3fr and 2fr在定义中 - 数字加起来为7，因此剩余的空间将被切成7等份，然后每个人都得到自己的份额。
分割水平空间
记住这一点，网格将成为你最好的朋友：
-
1fr 1fr 1fr--------> 3 个相等的列，
-
auto auto auto----> 3 个自适应宽度列
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
