我有一個包含兩個區域的網格。它可以很好地處理網格-模板-區域:列表詳細信息& quot。如果我只指定了一個區域:grid-template-areas，為什么它會創建一個3x2的網格？列表& quot？為什么它把第二個區域貼在右下方的軌道上？

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>

使用開發人員工具突出顯示網格和線條，我看到& quot詳細信息& quot位于顯式網格之外。(請注意負數。)如果刪除grid-area: details，此行為會發生變化；從。{班級規則詳情}。

因為您為& quot詳細信息& quot但是沒有在網格上給它一個明確的位置，它被放入隱式網格中最近的行和列，在那里它不接觸命名的行。

隱式和顯式網格

顯式網格:使用網格模板[-*]創建。 隱式網格:當內容放置在網格之外時，擴展定義的顯式網格，例如通過繪制額外的網格線來成行。 倒數計時

我們還可以從網格的塊和內聯端開始向后計數...這些行可以被定為-1，你可以從 這里，倒數第二行是-2。值得注意的是 最后一行是顯式網格的最后一行...并且不考慮 以外的隱式網格中添加的任何行或列 那個。

“網格面積”值

如果名稱以& ltcustom-ident & gt；，只有具有該名稱的行 數過了。如果使用該名稱的行不夠多，則所有隱式網格 為了找到這一點，假設行具有該名稱 位置。

試試這個

#main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

#main .list {
    background: yellow;
}

#main .details {
    background: green;
}

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