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.
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.
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>
