原文來自 Simple Named Grid Areas（https://css-tricks.com/simple-named-grid-areas/）
我認為CSS Grids中的命名網格區域是自帶的語法糖。你並不一定需要它們（你可以通過其他方式表示網格放置），但它可以使放置更直觀。
假設你設置了3列網格：
這裡沒有定義行，這些是隱性的並且將根據需要顯示。我們能定義它們，但我們就是不，因為就像在web設計中的許多情況一樣，我們不關心它們多高（高度將根據需要增長以適應內容）。
現在，如果我們要在grid的左上角放一些東西呢？我們可以告訴grid像這樣放置它：
這樣是可行的，但是.item最好是.grid的第一個子元素，否則，如果其他的一些元素會被隱性地放置在那裡，然後.item就會被擠到下一行。如果我們要100%確定把它放在左上角，我們這樣做最好：
現在它肯定是會在左上角了，即使一些其他的元素明確的放置在那邊（它們只會重疊）。我們可以使用grid-area屬性來簡寫代碼：
現在這些1和2可能都足夠直觀，但在涉及到列和行的更復雜的一些網格佈局中這些數字會顯得有點錯亂。
看一下這個，當我們定義列時，我們能用一個單獨的屬性來命名：
grid-template-areas中的每個引用組都是一行。裡面是我剛取的名字。可以是任何名字，只要它對你來說有意義。看到“pro”這個詞在兩行中重複了兩次了嗎？這很重要，因為正如顯示的那樣我們放置了一個元素“pro”，它將位於三列中的第一列並跨越兩行。這非常直觀，不是嗎？
然後我們可以這樣放置它：
這裡有一個簡單的例子，你可以在（https://codepen.io/chriscoyier/pen/yRXEbz）中編輯它：
閱讀更多 鍋鴨梨說 的文章
