如何使用"grid-template-rows:auto auto 1fr auto"解释了吗? [英] How is "grid-template-rows: auto auto 1fr auto" interpreted?

问题描述

最近，我使用 CSS网格创建了一个布局.尽管这很好用，但我对它的工作方式感到困惑.具体来说，我对grid-template-rows: auto auto 1fr auto;行感到困惑.

Recently, I created a layout using CSS grid. While this works well, I'm confused by how it works. Specifically, I'm confused about the line grid-template-rows: auto auto 1fr auto;.

最后发生的是页眉和页脚根据内容确定大小，这很有意义，因为它们跨越了页面的宽度.文章本身的大小取决于其内容.但是，标题"和导航"被拆分，以使标题根据内容和导航的大小占据其余空间.

What ended up happening here is that the header and footer sized according to the content, which makes sense since they spanned the width of the page. The article itself sized according to its content. But, the "title" and "nav" were split such that the title sized according to content and nav took the rest of the space.

如果我改用grid-template-rows: auto auto auto auto;，则标题和导航将共享相等的间距，这不是我想要的.

Had I used grid-template-rows: auto auto auto auto; instead, the title and nav would've shared equal spacing, which was not what I wanted.

auto auto 1fr auto的解释方式如何使它具有一定的大小，以使标题占据最小的空间，而导航则占据其余空间?在这种情况下，"fr"和"auto"如何相互作用?

How was the auto auto 1fr auto interpreted so that it gave me the sizing such that title took the minimum required space and nav took the rest? How does "fr" and "auto" interact in this scenario?

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>

推荐答案

在GRID CSS中，grid-template-rows值auto表示:

In GRID css, grid-template-rows value auto means:

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

The size of the rows is determined by the size of the container, and on the size of the content of the items in the row

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

and 1fr is a new flexible unit in GRID css. [Fr] is a fractional unit and 1fr is for 1 part of the available space.

所以这就是为什么您的第三个网格项目占用了剩余空间，而所有剩余网格项目都根据其内容占用了空间

so thats why your 3rd grid item is taking the remaining space and all remaining grid items are taking space according to its content

这篇关于如何使用"grid-template-rows:auto auto 1fr auto"解释了吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！