css grid布局入門

wzyplus 發(fā)布于2019-08-29 17:06 / 1305人閱讀

摘要：簡(jiǎn)介網(wǎng)格布局又稱網(wǎng)格，是一種二維網(wǎng)格布局系統(tǒng)。在處理網(wǎng)頁(yè)布局方面一直做的不是很好。網(wǎng)格容器中的所有子元素就會(huì)自動(dòng)變成網(wǎng)格項(xiàng)目網(wǎng)格線組成網(wǎng)格線的分界線。

簡(jiǎn)介

CSS網(wǎng)格布局（又稱“網(wǎng)格”），是一種二維網(wǎng)格布局系統(tǒng)。CSS在處理網(wǎng)頁(yè)布局方面一直做的不是很好。一開始我們用的是table（表格）布局，然后用float(浮動(dòng))，position（定位）和inline-block（行內(nèi)塊）布局，但是這些方法本質(zhì)上是hack，遺漏了很多功能，例如垂直居中。后來(lái)出了flexbox盒布局，解決了很多布局問題，但是它僅僅是一維布局，而不是復(fù)雜的二維布局，實(shí)際上它們（flexbox與grid）能很好的配合使用。

瀏覽器支持情況

在我們開始正式學(xué)習(xí)Grid布局之前，先看一下can i use上grid布局在各個(gè)瀏覽器下的支持情況是很有用的，

基本概念

要想學(xué)好Grid布局的用法，基本概念的介紹是少不了的，雖然看起來(lái)比較枯燥。

網(wǎng)格容器(Grid Container)

通過(guò)display屬性設(shè)置屬性值為grid或inline-grid可以創(chuàng)建一個(gè)網(wǎng)格容器。網(wǎng)格容器中的所有子元素就會(huì)自動(dòng)變成網(wǎng)格項(xiàng)目（Grid item）

網(wǎng)格線(Grid Line)

組成網(wǎng)格線的分界線。它們可以是列網(wǎng)格線（column grid lines），也可以是行網(wǎng)格線（row grid lines）并且居于行或列的任意一側(cè)

網(wǎng)格軌道(Grid Track)

兩個(gè)相鄰的網(wǎng)格線之間為網(wǎng)格軌道。你可以認(rèn)為它們是網(wǎng)格的列或行

網(wǎng)格單元(Grid Cell)

兩個(gè)相鄰的列網(wǎng)格線和兩個(gè)相鄰的行網(wǎng)格線組成的是網(wǎng)格單元，它是最小的網(wǎng)格單元

網(wǎng)格區(qū)(Grid Area)

網(wǎng)格區(qū)是由任意數(shù)量網(wǎng)格單元組成

基本屬性及作用 一個(gè)簡(jiǎn)單例子

要介紹Grid布局屬性，讓我們先從一個(gè)簡(jiǎn)單例子開始：

如上圖所示，如果我們要實(shí)現(xiàn)一個(gè)3x3的正方形矩陣，用Grid布局要怎么實(shí)現(xiàn)？

.container {
    display: grid;
    width: 200px;
    height: 200px;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
    grid-row-gap: 10px;
    grid-column-gap:10px;
}
.container div {
    background-color: #ccc;
    border: 1px solid #333;
}

如上面代碼所示，3x3的矩陣布局，用Grid布局去寫，非常簡(jiǎn)單方便，相對(duì)于使用其他布局來(lái)說(shuō)，Grid布局的優(yōu)點(diǎn)就顯現(xiàn)出來(lái)了，那么，接下來(lái)就讓我們看看Grid局部中那些常用屬性：

grid-template-rows：指定的每個(gè)值可以創(chuàng)建每行的高度。行高的尺寸可以是任何非負(fù)值，長(zhǎng)度可以是px、%、em等長(zhǎng)度單位的值

grid-template-columns：指定的每個(gè)值來(lái)創(chuàng)建每列的列寬

repeat函數(shù)：使用repeat()可以創(chuàng)建重復(fù)的網(wǎng)格軌道。這個(gè)適用于創(chuàng)建相等尺寸的網(wǎng)格項(xiàng)目和多個(gè)網(wǎng)格項(xiàng)目，repeat()接受兩個(gè)參數(shù)：第一個(gè)參數(shù)定義網(wǎng)格軌道應(yīng)該重復(fù)的次數(shù)，第二個(gè)參數(shù)定義每個(gè)軌道的尺寸

grid-column-gap和grid-row-gap屬性用來(lái)創(chuàng)建列與列，行與行之間的間距，間距(Gap)可以設(shè)置任何非負(fù)值，長(zhǎng)度值可以是px、%、em等單位值。

網(wǎng)格線號(hào)碼定位

依舊是上面html代碼，一個(gè)3x3的矩陣，不同的是這次我們通過(guò)網(wǎng)線號(hào)碼來(lái)定位某一個(gè)特定方塊。

.container {
    display: grid;
    width: 200px;
    height: 200px;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
}
.container div {
    background-color: #ccc;
    border: 1px solid #333;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3; 
/*  grid-area: 2/2/3/3; */
  }

通過(guò)上面的代碼我們可以實(shí)現(xiàn)如下效果：

我們定位矩陣正中間的小方塊顯示出來(lái)，其余的就不顯示了，下面我們網(wǎng)格線號(hào)碼定位的那些屬性：

每條線是從網(wǎng)格軌道開始，網(wǎng)格的網(wǎng)格線從1開始，每條網(wǎng)格線逐步增加1

grid-row-start：表示開始的行網(wǎng)格線序號(hào)

grid-row-end：表示結(jié)束的行網(wǎng)格線序號(hào)

grid-column-start：表示開始的列網(wǎng)格線序號(hào)

grid-row-end：表示結(jié)束的列網(wǎng)格線序號(hào)

如果一個(gè)網(wǎng)格項(xiàng)目跨度只有一行或一列，那么grid-row-end和grid-column-end不是必需的

grid-area：網(wǎng)格區(qū)域，也是用來(lái)定位，如果只提供一個(gè)值，它指定了grid-row-start和grid-column-start的值。如果提供兩個(gè)值，第一個(gè)值是grid-row-start、grid-column-start的值，第二個(gè)值是grid-row-end、grid-column-end的值，兩者之間必須要用/隔開。如果指定四個(gè)值，第一個(gè)值對(duì)應(yīng)grid-row-start，第二個(gè)值對(duì)應(yīng)grid-column-start，第三個(gè)值對(duì)應(yīng)grid-row-end和第四個(gè)值對(duì)應(yīng)grid-column-end

網(wǎng)格區(qū)域命名定位網(wǎng)格項(xiàng)目

通過(guò)上面的例子，我們知道了如何用網(wǎng)格線去定位網(wǎng)格項(xiàng)目，接下來(lái)我們將學(xué)習(xí)如何通過(guò)網(wǎng)格區(qū)域的命名來(lái)定位網(wǎng)格項(xiàng)目，老樣子，依舊從一個(gè)例子開始：

.container {
    display: grid;
    width: 400px;
    height: 400px;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    grid-template-areas: "header header2 header3" "body body2 body3" "footer footer2 footer3";
}
.container div {
    background-color: #ccc;
    border: 1px solid #333;
}
.container .first {
    grid-row-start: header2;
    grid-row-end: body2;
    grid-column-start: header;
    grid-column-end: header2;
}

如上述例子看到的，本來(lái)是一個(gè)3x3的矩陣，但是通過(guò)區(qū)域命名的方式，將第一個(gè)div設(shè)置了跨兩行兩列，接下來(lái)讓我們一起了解一下網(wǎng)格區(qū)域命名定位網(wǎng)格項(xiàng)目的相關(guān)屬性：

像網(wǎng)格線名稱一樣，網(wǎng)格區(qū)域的名稱也可以使用grid-template-areas屬性來(lái)命名。引用網(wǎng)格區(qū)域名稱也可以設(shè)置網(wǎng)格項(xiàng)目位置

設(shè)置網(wǎng)格區(qū)域的名稱應(yīng)該放置在單引號(hào)或雙引號(hào)內(nèi)，每個(gè)名稱由一個(gè)空格符分開。網(wǎng)格區(qū)域的名稱，每組（單引號(hào)或雙引號(hào)內(nèi)的網(wǎng)格區(qū)域名稱）定義了網(wǎng)格的一行，每個(gè)網(wǎng)格區(qū)域名稱定義網(wǎng)格的一列

grid-row-start和grid-row-end通過(guò)區(qū)域命名分別設(shè)置了行開始的位置和結(jié)束，grid-column-start和grid-column-end通過(guò)區(qū)域命名分別設(shè)置了列開始的位置和結(jié)束位置

總結(jié)

這篇文章簡(jiǎn)單的介紹了一些Grid布局的屬性和用法，但沒有涉及所有，Grid布局還有很多屬性和用法需要自己去探索，通過(guò)不同屬性的排列組合，可以發(fā)掘不同的玩法，這不正是布局的魅力嗎？
如果大家想要更加全面的了解Grid布局，可以去Mozilla Grid板塊去探索發(fā)現(xiàn)Grid布局的魅力。
這篇文章如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤?，歡迎批評(píng)指正，如果喜歡，歡迎點(diǎn)贊收藏