使用 CSS Grid Generator來快速使用及學習 Grid 布局
CSS Grid Generator
CSS Grid Generator是一個由Sarah Drasner創建的免費工具。它是一個可視化設計工具，允許咱們創建一個基本的 grid 布局，然后就可以使用生成對應的代碼，幫助咱們快速布局。
第一次進入是界面是這樣子的：
CSS Grid 布局示例
當我正在學習一些東西時，我發現最好的學習方法是使用現有的工具構建實用的東西。 在本文中，咱們先從一個簡單的布局開始，然后使用CSS Grid Generator創建在實際項目中使用所需的代碼。
首先從一個典型的布局開始，如下所示：
接著在 CSS Grid Generator 界面的右側更新對應的以下內容：
- 行: 4
- 列: 3
- 列間距: 20
- 行間距: 20
間距讓咱們的內容之間有一定的空白。可以只使用列間距，但我想在 Header 和 Footer 之前留出一些空白，所以還同時使用行間距。
接下來，就是需要定義應用程序的不同區域。在 CSS Grid Generator 中，可以單擊并拖動到需要合并地方來創建一個區域。咱們希望Footer跨越整個網格，側邊欄占用一個單元格，主內容區域跨越2列，Footer 跨越4列,最終效果，如下：
這看起來有點像咱們想要的布局，但仍然需要定義一些具體的尺寸。 在CSS Grid Generator會注意到每行和每列旁邊都有一個輸入框，可用于設置特定大小。
- Header: 100px height
- Sidebars: 200px width
- Footer: 50px height
這看起來更像更像咱們想要的布局，但是你可能會問1fr是多少。
軌道可以用任何長度單位來定義。Grid還引入了一個額外的長度單位，以幫助各位創建靈活的Grid軌道。新的fr單元表示網格容器中可用空間的一小部分。
第二行的1fr會告訴區域占用剩余的可用空間。如果將容器設置為100vh，就會占據整個頁面的內容，列也是如此。
CSS Grid Generated 生成的代碼
點擊“請給我示例中的代碼”就可以查看對應布局生成的 CSS 代碼：
創建一個simple-layout.htm并添加以下代碼：
接下來添加上面生成的 CSS:
接著添加對應的標簽：
最后添加下面的CSS，它將為.div1 - .div5添加一些背景色：
- div:not(.parent) {
- padding: 10px;
- background-color: rgb(199, 199, 199);
- }
運行：
這看起來很好，但你希望它占據整個瀏覽器窗口。所以需要向.parent類添加height: 100vh：
- .parent {
- display: grid;
- grid-template-columns: 200px 1fr 1fr 200px;
- grid-template-rows: 100px 1fr 50px;
- grid-column-gap: 20px;
- grid-row-gap: 20px;
- height: 100vh;
- }
最終效果：
網格軌道(Grid Track) 加餐
兩個相鄰的網絡線之間為網絡軌道。
圖中的同方向 1 和 2， 2 和 3 都是相鄰的網絡線，當然同方向的 1 和 3 或者不同方向的 1 和 2 就不是相鄰的網絡線。
相鄰的網絡線為網格軌道，如下，黑色1 和 2 之間就構成了網絡軌道(背景深橘色)：
上面總共有 5 個網絡軌道，水平方向灰色 1 和 2， 2 和 3， 3 和 4，豎直方向黑色的 1 和 2， 2 和 3，共 5 個。
網格單元(Grid Cell) 加餐
兩個相鄰的列網絡線和兩個相鄰的行網絡線組成的就是網絡單元，如下面的深橘色背景就是網絡單元。
網絡單元要與網絡項(項目)區別開來，網絡項是 Html 中可以找的到 Dom 元素，網絡單元是在定義容器的時候，它就會分割出來的一個一個單元格。
網格區域(Grid Area) 加餐
四個網絡線包圍的總空間。
fr單位(加餐)
剩余空間分配數，用于在一系列長度值中分配剩余空間，如果多個已指定了多個部分，則剩下的空間根據各自的數字按比例分配。
