還記得 Day 02 提到要將網頁做得像全頁 APP 的樣子嗎？今天來一步步實作看看吧！

滿版設計

版面確認

在這張設計稿模擬圖中，可以看到這個頁面的元素分成 5 個區塊。不會出現 x 與 y 的滾動軸，效果像是滿版畫面。

用前兩天學到的概念來畫格線，拆分步驟：

1. 將父容器切成 3 欄 3 列。
2. 子元素明確指定對應區塊。
3. 「工具列 1」、「版面設定」需要向下跨一列。

除此之外，RWD 還需要注意：

• 工具列與導覽列不可以壓縮，寬高由內容決定。
• 可以操作的區塊，盡量讓元素保持合適大小，所以只有預覽視窗的寬高是彈性伸縮。

動手做做看

首先，來設定父元素。先在最外層設定寬 100 vw，高 100vh 。格線設定中，第一欄寬度、第一行與第三行高度由內容決定，並且第二欄與第三欄的比例是 3:2。

<div class="layout">
  <div class="nav">Navbar</div>
  <div class="tool1"><span>Toolbar 1</span></div>
  <div class="preview">Preview</div>
  <div class="tool2">Toolbar 2</div>
  <div class="panel"><span>Panel Settings</span></div>
</div>

.layout {
        height: 100vh;
        width: 100vw;
        display: grid;
        grid-template-columns: auto 3fr 2fr;
        grid-template-rows: auto 1fr auto;
        gap: 2vw;
        
        /* 以可以用 grid-template-areas，子元素在用 grid-area 申明是哪個區塊 
        grid-template-areas:
			    "nav   nav     nav"
			    "tool1 preview panel"
			    "tool1 tool2   panel";
			  */
}

接著定位子元素，因為流向預設是左到右，所以 .nav 與 .tool1 可以只寫必要屬性。

.nav {
	grid-column: 1 / 4;
}
.tool1 { 
	grid-row: 2 / span 2;  /* 也可以寫 2 / 4 */
}
.preview {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}
.tool2 { 
	grid-column: 2 / 3;
	grid-row: 3 / 4;
}
.panel {
	grid-column: 3 / 4;
	grid-row: 2 / span 2;    /* 也可以寫 2 / 4 */
}

醬就可以啦！是不是很簡單？

只要確定父容器空間，以及要畫幾欄幾列，就沒有想像中的複雜。熟悉後就能視需要，靈活應用，例如：用前端框架開發時，就能夠在巢狀視圖中主元件先定義好格線，子元件就只需要處理元件內的排版。

同空間動態排版

個人覺得還有一種狀況，也很適合用 Grid。那就是在同一個空間（容器）中，有不同的排版方式。遇過的情境有：

• 使用者增加、減少網頁元素時，排版會變動
• 封裝成元件後，不同版型共用同空間

有的時候，不是 Flexbox 做不出同樣的效果。而是 CSS 寫起來複雜度會高很多，也會需要更多層 HTML 來包裝。
同樣的畫面效果，用 Grid 反而更加直觀、好維護、方便擴充。

把寫過的專案，簡化畫面做成範例。給大家參考看看 (´・ω・)つ旦

兩種排版方式的元件

範例連結：Codepen

依操作即時變換版型

範例連結：Codepen，因為是一個蘿蔔一個坑，所以主要是更動父元素的欄、列數量

什麼？！今天才第四天嗎？體感上已經過一個月了。
Grid 主題大概介紹到這邊，明天再補充一個圖片 RWD 處理方式。