網(wǎng)格是一個(gè)成熟的設(shè)計(jì)工具，許多現(xiàn)代網(wǎng)站布局是基于規(guī)則網(wǎng)格。在本文中，我們將看看基于網(wǎng)格的設(shè)計(jì)，以及如何使用CSS來(lái)創(chuàng)建網(wǎng)格——兩者都通過(guò)現(xiàn)在的工具，和剛剛開始在瀏覽器中可用的新技術(shù)。
網(wǎng)格僅僅是由水平和垂直線集合創(chuàng)建的一個(gè)模式，我們可以根據(jù)這個(gè)模式排列我們的設(shè)計(jì)元素。它們幫助我們創(chuàng)建設(shè)計(jì)——在頁(yè)面之間移動(dòng)時(shí)元素不會(huì)跳動(dòng)或更改寬度，從而在我們的網(wǎng)站上提供高一致性。
網(wǎng)格通常具有列（column），行（row），以及在每行和列之間的間隙——通常稱為溝槽（gutter）。
定義一個(gè)網(wǎng)格
Grid(網(wǎng)格) 模塊為 display 屬性提供了一個(gè)新的值：grid。當(dāng)你將任何元素的 display 屬性設(shè)置為 grid 時(shí)，那么這個(gè)元素就是一個(gè) 網(wǎng)格容器(grid container)，它的所有直接子元素就成了 網(wǎng)格項(xiàng)(grid items)。
讓我們創(chuàng)建創(chuàng)建一個(gè) 3×3 的布局
html
重慶分公司
重慶分公司
.game-board div 是網(wǎng)格容器，而 .box div 是網(wǎng)格項(xiàng)?，F(xiàn)在我們將通過(guò) Grid 布局來(lái)實(shí)現(xiàn) 3×3 布局。
.game-board
{
display: grid;
grid-template-rows: 200px 200px 200px;
grid-template-columns: 200px 200px 200px;
}在這里，還使用了其他兩個(gè)屬性。
grid-template-rows 屬性允許我們指定網(wǎng)格中的行數(shù)及行的高度。
grid-template-columns 屬性允許我們指定網(wǎng)格中的列數(shù)及列的寬度?？梢灾付ㄈ魏螁挝坏某叽绱笮?，包括像素，百分比和其他單位fr。
fr 單位(等分)
fr 是為網(wǎng)格布局定義的一個(gè)新單位。它可以幫助你擺脫計(jì)算百分比，并將可用空間等分。
例如，如果在網(wǎng)格容器中設(shè)置這個(gè)規(guī)則：grid-template-rows: 2fr 3fr，那么你的網(wǎng)格容器將首先被分成 2 行。然后將數(shù)字部分加在一起，這里總和為 5， 即 5 等分。
就是說(shuō)，我們將有 2 行：第一排占據(jù)垂直空間的 2/5 。 第二排占垂直空間的 3/5 。
我們使用 fr 代替 px
.game-board
{
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
復(fù)制代碼
這里特別需要注意的是： fr 單位是等分可用空間，或者說(shuō)剩余空間。看個(gè)例子
復(fù)制代碼
.game-board
{
grid-gap:2px;
display: grid;
width:300px;
height:200px;
grid-template-rows: 100px 1fr 1fr;
grid-template-columns: 1fr 50px 1fr;
}
復(fù)制代碼
布局效果如圖：
你會(huì)看到 fr 單位是將 總的尺寸 減去 單元格明確尺寸后，在等分剩余空間。 grid-gap 是間隔
repeat() 函數(shù)
在某些情況下，我們可能有很多的列和行。在 grid-template 屬性中指定每一個(gè)值可能會(huì)很乏味。幸運(yùn)的是，有一個(gè) repeat 函數(shù)，就像任何一個(gè)循環(huán)重復(fù)多少次輸出某個(gè)給定值。它有兩個(gè)參數(shù)。第一個(gè)是迭代次數(shù)，第二個(gè)是要重復(fù)的值。我們用 repeat 函數(shù)重寫上面的例子。
.game-board
{
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}等價(jià)于：
.game-board
{
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}grid-template 屬性
grid-template 屬性是 grid-template-rows 和 grid-template-columns 的簡(jiǎn)寫語(yǔ)法。 這是它的語(yǔ)法：
grid-template: ro ws / co lu mns;
我們上面的例子使用這個(gè)簡(jiǎn)寫語(yǔ)法后，看起來(lái)非常整齊。
.game-board
{
display: grid;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}示例HTML
X
O
O
O
X
O
O
X
X
CSS
.game-board
{
width: 600px;
height: 600px;
margin: 0 auto;
background-color: #34495e;
color: #fff;
border: 6px solid #2c3e50;
border-radius: 10px;
display: grid;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}
.box
{
border: 6px solid #2c3e50;
border-radius: 2px;
font-family: Helvetica;
font-weight: bold;
font-size: 4em;
display: flex;
justify-content: center;
align-items: center;
}效果如圖：
定位網(wǎng)格項(xiàng)
假設(shè)我想將第 6 個(gè)框移到第 2 個(gè)框的位置。沒(méi)有CSS網(wǎng)格，不改變 HTML 的情況下，這幾乎是一個(gè)不可能的任務(wù)，至少對(duì)我而言。但是如果我們使用網(wǎng)格模塊，改變網(wǎng)格中網(wǎng)格項(xiàng)的位置是一件輕而易舉的事情。要將第6個(gè)框移到第2個(gè)框的位置，我們必須確切知道第2個(gè)框在哪里。通過(guò)網(wǎng)格線編號(hào)的幫助，我們可以很容易地找到這個(gè)位置。第二個(gè)方框位于第2條列網(wǎng)格線之后，第3條列網(wǎng)格線之前，第1條行網(wǎng)格線之下，第2條行網(wǎng)格線之上?，F(xiàn)在我們可以使用以下屬性將這些網(wǎng)格線編號(hào)分配到第6個(gè)框中：
grid-column-start
grid-column-end
grid-row-start
grid-row-end前兩個(gè)屬性對(duì)應(yīng)于垂直網(wǎng)格線，也就是列網(wǎng)格線的開始和結(jié)束。 最后兩個(gè)屬性是指水平網(wǎng)格線，也就是行網(wǎng)格線的開始和結(jié)束。 讓我們分配正確的網(wǎng)格線編號(hào)來(lái)移動(dòng)第 6 個(gè)框。
.box:nth-child(6)
{
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 3;
}
還有兩個(gè)簡(jiǎn)寫屬性用于將行和列的開始網(wǎng)格線和結(jié)束網(wǎng)格線設(shè)置在一起。
.box:nth-child(6)
{
grid-row: 1 / 2;
grid-column: 2 / 3;
}此外，還有一個(gè)grid-area屬性是所有四個(gè)上述屬性的簡(jiǎn)寫屬性。 它按以下順序取值：
grid-area: / / / ; 現(xiàn)在我們的例子可以寫成這樣
.box:nth-child(6)
{
grid-area: 1 / 2 / 2 / 3;
}上面的代碼行也可以進(jìn)一步減少。正如您所看到的，這個(gè)框只占用一行和一個(gè)列，所以我們只需要指定行和列的起始線，而無(wú)需結(jié)束線的值
.box:nth-child(6)
{
grid-area: 1 / 2;
}如果我們想要第6個(gè)框跨越兩個(gè)框的區(qū)域呢？ 這很容易通過(guò)將 column-end 值加 1 的辦法來(lái)完成。
.box:nth-child(6)
{
grid-area: 1 / 2 / 2 / 4;
}
也可以使用 span 關(guān)鍵字和占據(jù)的 軌道數(shù)量，來(lái)代替指定 grid-row-end 和 grid-column-end 的結(jié)束網(wǎng)格線編號(hào)。 在這種情況下，第6個(gè)框是跨越 2 列和 1 行。
.box:nth-child(6)
{
grid-area: 1 / 2 / 2 / span 2;
}例子HTML：
CSS
.container
{
display: grid;
grid-template-rows: 1fr 5fr 1fr;
grid-template-columns: 2fr 5fr 3fr;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-gap: .75em;
background-color: #eee;
width: 100vw;
height: 100vh;
}
header
{
grid-area: header;
background-color: #9b59b6;
}
nav
{
grid-area: nav;
background-color: #3498db;
}
main
{
grid-area: main;
background-color: #2ecc71;
}
aside
{
grid-area: aside;
background-color: #f1c40f;
}
footer
{
grid-area: footer;
background-color: #1abc9c;
}效果如下：
此外，我們還可以把flex(彈性盒子)與grid聯(lián)合起來(lái)用，在此不多說(shuō)
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
