Day07 - 網格排版

打從CSS問世以來，它的核心一直存在著排版的缺陷。為了排版，我們使用各式各樣的特殊技巧來填補這個空缺。Flexbox排版協助填這個空缺，但flexbox只是針對導覽列等特殊情況設計的功能。

相反的，網格排版(Grid layout)是通用排版系統，有許多強大又有彈性的方式來定義有重複模式的網格線(grid line)，將元素附加到這些網格線上等，也可以做巢狀網格，甚至還可以將表格或flexbox容器加到網格裡等各式各樣的作法。網格排版是重要的排版系統，有許多需要學習的內容！

建立網格容器

建立網格的第一步是定義網格容器(grid container)。類似容器區塊或是flexbox排版中的彈性容器。網格容器是為了內容定義了網格格式化環境(grid formatting context)的元素。

網格可以區分兩種：

1. (disply:grid)為普通的網格，會產生區塊級網格。
2. (display:inline-grid)通常用在文字元素之間的行內網格。
   大多數情況下，我們建立的網格都是區塊級元素

基本網格術語

網格容器是建立網格格式化環境的方框，也就是用來建立網格與依照網格排版規則放置元素的區域。

網格項目(grid item)

網格項目是在網格排版環境中參與網格排版的東西，通常是網格容器的子元素，但也可以是元素內容裡的一些文字。

網格軌道(grid track)

相鄰於網格線兩側所形成的連續單位，也就是指相鄰的網格行(grid column)或網格列(grid row)，會從網格容器的一側延續到另一側。

網格單元格(grid cell)

由四條網格線所形成的封閉區域，當中沒有其他的網格線穿過。這是網格排版最小的區域單位。

網格區域(grid area)

由四調網格線形成的任何封閉矩型區域，由一個以上的網格單位格組成。區域最小可以是一個單元格，最大可以包含網格中的所有的單元格。

放置網格線

• grid-template-rows
• grid-template-columns
   

本篇未完待續