Question

最近，我使用CSS grid创建了一个布局。虽然这很好用，但我对它是如何工作感到困惑。具体来说，我对行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>

Answer 1

在GRID css中，grid-template-rows值auto表示：

行的大小取决于容器的大小以及行中项目内容的大小

和1fr是GRID css中新的灵活单位。 [Fr] 是一个小数单位，1fr代表可用空间的一部分。

这就是为什么你的第3个网格项占用剩余空间而所有剩余的网格项都根据其内容占用空间

Answer 2

39 // 11 // 24086357500 // MEBİS // 655000000 44 // 11 // 24923057500 // Wimax LTE // 836700000 45 // 11 // 24941957500 // Egitim // 18900000 46 // 11 // 24992396000 // Otomatik Araç // 50438500 0 // 10 // 2000000000 // Fiber // 2000000000 1 // 11 // 12000000000 // LTE Geniş Bant // 10000000000 2 // 11 // 12030000000 // GSM Geçiş // 30000000 3 // 11 // 12107000000 // Altyapı Geçiş // 77000000 4 // 11 // 14707000000 // Sayısal Telsiz // 2600000000表示“占用可用空间的一小部分”，并且由于没有其他元素定义为1fr，它也意味着“占用所有可用空间”

fr表示“取auto属性所具有的任何值”，默认情况下也是grid-auto-rows，在这种情况下意味着要根据内容进行调整...但是跟踪如果需要匹配其他列上的内容大小，也可以拉伸

Answer 3

根据经验法则

fr贪婪
汽车很害羞。

当浏览器呈现网格时， first 首先会计算 auto 元素的必要大小-它们都会获得最小的生存空间-然后，在知道所有其他大小之后，它会开始用 fr 比例填充剩余的空白。（因此，在完成其余操作后，浏览器将计算所有fr数的总和，假设您有1fr + 1fr + 3fr + 2fr等于7，那么剩余空间将被切成7个相等的切片，然后每个人都得到他们的分享。）

此外，当您分割水平空间时：

1fr 1fr 1fr 将为您提供3个相等的列，
自动自动自动提供宽度自适应的列

Answer 4

The fr unit represents a fraction of the leftover space in the grid container.

剩余空间是在auto等之后计算的。

如何解释“grid-template-rows：auto auto 1fr auto”？

4 个答案:

根据经验法则