我有一个有两个区域的网格.它在grid-template-areas: "list details"的情况下工作得很好.如果我只指定一个区域:grid-template-areas: "list"，为什么它会创建3x2栅格？为什么它把第二个区域粘在右下角的轨道上？
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>