I have a grid with 2 areas. It works fine with grid-template-areas: "list details"
. Why does it create a 3×2 grid if I specify only one area: grid-template-areas: "list"
? And why does it stick the second area in the bottom right track?
https://jsfiddle.net/o5txebkc/
#main {
display: grid;
grid-template-areas:
"list";
}
#main .list {
background: yellow;
grid-area: list;
}
#main .details {
background: green;
grid-area: details;
}
<main id="main">
<article class="list">
<ul>
<li>one</li>
<li>two</li>
</ul>
</article>
<article class="details">
<h3>Details</h3>
<p>
some details
</p>
</article>
</main>
2
Answers
Try this
Using Developer Tools to highlight the grid and show the lines, I see that "details" is positioned outside of the grid. Notice that the behavior changes if you remove
grid-area: details;
.Because you defined a grid-area for "details" but did not give it a position on the grid, it is placed outside of the grid where it is not touching the named lines.