css在前端開發中，Grid 佈局是網站設計的基礎，CSS Grid 是創建網格佈局最強大和最簡單的工具。文我們主要介五分鐘教你學會 CSS Grid 版面的方法,希望能幫助大家。
CSS Grid 今年也獲得了主流瀏覽器（Safari，Chrome，Firefox，Edge）的原生支持，所以我相信所有的前端開發人員都必須在不久的將來學習這項技術。
在本文中，我將盡可能快速地介紹CSS網格的基本知識。我會把你不該關心的一切都忽略了，只是為了讓你了解最基本的知識。
你的第一個 Grid 佈局
CSS Grid 佈局由兩個核心組成部分是 wrapper （父元素）和 items （子元素）。 wrapper 是實際的 grid(網格)，items 是 grid(網格) 內的內容。
下面是一個wrapper 元素，內部包含6個items ：
#<p class="wrapper"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> </p>
要把wrapper 元素變成一個grid(網格)，只要簡單地把其display 屬性設為grid 即可：
.wrapper {
display: grid;
}但是，這還沒有做任何事情，因為我們沒有定義我們希望的grid(網格) 是怎樣的。它會簡單地將6個 p 堆疊在一起。
我已經新增了一些樣式，但這與 CSS Grid 沒有任何關係。
Columns(列) 和 rows(行)
為了使其成為二維的網格容器，我們需要定義列和行。讓我們建立3列和2行。我們將使用 grid-template-row 和 grid-template-column 屬性。
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}正如你所看到的，我們為 grid-template-columns 寫入了 3 個值，這樣我們就會得到 3 列。 我們想要得到 2 行，因此我們為 grid-template-rows 指定了2個值。
這些值決定了我們希望我們的列有多寬（ 100px ），以及我們希望行數是多高（ 50px ）。 結果如下：
為了確保你能正確理解這些值與網格外觀之間的關係，請看一下這個例子。
.wrapper {
display: grid;
grid-template-columns: 200px 50px 100px;
grid-template-rows: 100px 30px;
}請試著理解上面的程式碼，思考一下以上程式碼會產生怎樣的佈局。
這是上面程式碼的佈局的結果：
#非常好理解，使用起來也非常簡單是不是？下面我們就來加大一點難度。
放置 items(子元素)
接下來你需要學習的是如何在 grid(網格) 上放置 items(子元素) 。特別注意，這裡是體現 Grid 佈局超能力的地方，因為它讓創建佈局變得非常簡單。
我們使用與之前相同的HTML 標記，為了幫助我們更好的理解，我們在每個items(子元素) 加上了單獨的class ：
<p class="wrapper"> <p class="item1">1</p> <p class="item2">2</p> <p class="item3">3</p> <p class="item4">4</p> <p class="item5">5</p> <p class="item6">6</p> </p>
現在，我們來建立一個3×3 的grid(網格)：
#.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}將得到以下佈局：
不知道你發現沒有，我們只在頁面上看到3×2 的grid(網格)，而我們定義的是3×3 的grid(網格) 。這是因為我們只有 6 個 items(子元素) 來填滿這個網格。如果我們再加3個 items(子元素)，那麼最後一行也會被填滿。
要定位和調整items(子元素) 大小，我們將使用grid-column 和grid-row 屬性來設定：
##
.item1 {
grid-column-start: 1;
grid-column-end: 4;
} 
.item1 {
grid-column: 1 / 4;
}#
为了确保你已经正确理解了这个概念，我们重新排列其他的 items(子元素) 。
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
.item3 {
grid-row-start: 2;
grid-row-end: 4;
}
.item4 {
grid-column-start: 2;
grid-column-end: 4;
}你可以尝试在你的脑子里过一边上面代码的布局效果，应该不会很难。
以下是页面上的布局效果：
以上内容就是五分钟教你学会 CSS Grid 布局，希望能帮助到大家。
相关推荐：
CSS Grid布局指南_html/css_WEB-ITnose
CSS Grid布局模块简介_html/css_WEB-ITnose
以上是五分鐘教你 CSS Grid 佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！
