CSS Grid布局：圖解網格布局中術語二

在 上一節中 ，主要介紹了CSS Grid布局中網格線、網格布局屬性、單元格合並等相關術語，在這篇文章中將繼續介紹網絡布局中的相關術語：網格區域，網格軌道和網格單元格。希望對大家對學習CSS Grid布局有所幫助。

網格區域（Grid areas）

記得前面的文章中介紹網絡線的一節中，了解到可以通過 grid-row 和 grid-column 構建出 grid-area （也就是我們要說的網格區域）。通過網格線構建的網格區域，其有一個明確的順序： grid-row-start / grid-column-start / grid-row-end / grid-column-end 。如下面示例所示：

.item-1 {
  grid-area: 1 / 1 / 2 / 4;
}
.item-2 {
  grid-area: 2 / 1 / 4 / 2;
}
.item-4 {
  grid-area: 2 /  3 / 4  / 4;
}
.item-6 {
  grid-area: 4 / 1 / 5 / 4;
}

效果如下：

上面這種方式，能通過網格線構造出想要的網格區域。但更妙的是，在CSS Grid布局中可以直接定義網格區域，用來放置對應的網格項目。CSS Grid布局有可以使用 grid-template-areas 屬性 來聲明。然後使用 grid-area 調用聲明好的網格區域名稱來放置對應的網格項目。

假設我們有一個 5 x 4 的網格：

<section class="grid">
  <div class="title">title</div>
  <div class="nav">nav</div>
  <div class="main">main</div>
  <div class="aside">aside</div>
  <div class="footer">footer</div>
</section>

先在把 .grid 聲明為網格容器：

.grid {
    grid-template-columns: 100px 100px 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    grid-template-areas:
        'title title title title aside'
        'nav main main main aside'
        'nav main main main aside'
        'footer footer footer footer footer';
}

通過 grid-template-rows 設置了每行的行高， grid-template-columns 設置了每列的列寬，而使用 grid-template-areas 是用來聲明了網格區域。

把對應的網格項目放到已聲明好的網格區域上：

.title {
  grid-area: title;
}
.nav {
  grid-area: nav;
}
.main {
  grid-area: main;
}
.aside {
  grid-area: aside;
}
.footer {
  grid-area: footer;
}

對應的意思草圖如下所示：

最終上面代碼繪制出來的網格效果如下：

網格區域和網格線命名

有關於網格區域和位置屬性是一個非常有趣的事情，可以使用網格線的隱名來創建一個網格區域。這些隱名使用 -start 和 -end 後綴添加到網格區域名後面。比如上面示例中的 title 區域創建了 4 條網格線的隱名：

• 區域左邊的網格線 title-start
• 區域右邊的網格線 title-end
• 區域頂邊的網格線 title-start
• 區域底邊的網格線 title-end

像下面的例子，可以使用隱式名來放置一個網格項目：

grid-column: main-start / aside-end;
grid-row: title-start / nav-end;

在網格布局中，如果你使用了帶有後綴的名詞命名了網格線，其實就創建了一個隱式的網格區域，所以像下面這樣的方式，也可以創建和前面示例相同的網格：

.grid {
    display: grid;
    grid-template-columns: [title-start nav-start footer-start] 100px [main-start nav-end] 100px 100px 100px [aside-start title-end main-end] 100px [aside-end footer-end];
    grid-template-rows: [title-start aside-start] 100px [nav-start main-start title-end] 100px 100px [footer-start nav-end main-end aside-end] 100px [footer-end];
}

這樣創建好網格線之後，可以直接通過 grid-area 調用隱式的網格區域名來創建網格：

除此之外，還可以通過 grid-row 和 grid-column 調用網格線名稱，創建網格：

.title {
  grid-row: title-start / title-end;
  grid-column: title-start / title-end;
}
.nav {
  grid-row: nav-start / nav-end;
  grid-column: nav-start / nav-end;
}
.main {
  grid-row: main-start / main-end;
  grid-column: main-start / main-end;
}
.aside {
  grid-row: aside-start / aside-end;
  grid-column: aside-start / aside-end;
}
.footer {
  grid-row: footer-start / footer-end;
  grid-column: footer-start / footer-end;
}

效果如下：

或許你可能會覺得，在 grid-template-rows 和 grid-template-columns 中使用一大串的 [title-start aside-start] 等方式聲明隱式網格線，創建隱式的網格區域麻煩。但事實上，我們不需要這樣做，通過 grid-template-areas 聲明的網格區域，就已經創建了隱式網格線，如此一來，不使用 grid-area 而使用 grid-row 和 grid-column 就可以放置對應的網格項目。

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    grid-template-areas:
            'title title title title aside'
            'nav main main main aside'
            'nav main main main aside'
            'footer footer footer footer footer';
}
.title {
    grid-row: title-start / title-end;
    grid-column: title-start / title-end;
}
.nav {
    grid-row: nav-start / nav-end;
    grid-column: nav-start / nav-end;
}
.main {
    grid-row: main-start / main-end;
    grid-column: main-start / main-end;
}
.aside {
    grid-row: aside-start / aside-end;
    grid-column: aside-start / aside-end;
}
.footer {
    grid-row: footer-start / footer-end;
    grid-column: footer-start / footer-end;
}

網格軌道（Grid Tracks）

網格軌道 用更好的詞來描述其實就是網格的 行 或 列 。就是網格中相鄰兩條 網格線 組成的區域。如下圖所示：

如上圖所示，豎線網格線 1 和 2 （藍綠色）組成了第一列；豎線網格線 5 和 6 （黃色）組成了第五列；橫線網格線 1 和 2 （酒紅色）組成了第一行。那麽這幾個區域都是我們所說的網格軌道。

網格中的每個軌道(行或列)都有一個尺寸函數，用來控制行的高度或列的寬度。而且還具備自動計算的功能，當內容超過網格行、列指定的尺寸時，會自動增加行的高度或列的寬度。另外相鄰網格軌道可以通過 網格間距 隔開。

單元格(Grid Cell)

網格單元格（Grid Cell）是指網格行和列交叉點。它是一個可以定位網格項目時要參考的網格的最小單位。

在網格布局中，多個單元格可以構成一個網格區域。其實他就像表格（ table ）中的 td 。

總結

繼上一篇文章 之後，在這篇文章中介紹了網格區域、網格軌道和網格單元格的術語。除了這兩篇文章介紹到的中網格線、網格布局屬性、單元格合並、網格區域、網格軌道和網格單元格之外還有其他術語，在下一篇文章中將詳細介紹網格布局中的網格術語。也是較為復雜的一部分。感興趣的同學歡迎持續關註後續的更新。

大漠

如需轉載，煩請註明出處： http://www.w3cplus.com/css3/css-grid-layout-terminology-part2.html

文章來源：