這是一篇快速介紹網(wǎng)站未來(lái)布局的文章。

Grid 布局是網(wǎng)站設(shè)計(jì)的基礎(chǔ)，CSS Grid 是創(chuàng)建網(wǎng)格布局最強(qiáng)大和最簡(jiǎn)單的工具。

CSS Grid 今年也獲得了主流瀏覽器（Safari，Chrome，F(xiàn)irefox，Edge）的原生支持，所以我相信所有的前端開(kāi)發(fā)人員都必須在不久的將來(lái)學(xué)習(xí)這項(xiàng)技術(shù)。

在本文中，我將盡可能快速地介紹CSS網(wǎng)格的基本知識(shí)。我會(huì)把你不應(yīng)該關(guān)心的一切都忽略掉了，只是為了讓你了解最基礎(chǔ)的知識(shí)。

你的第一個(gè) Grid 布局

CSS Grid 布局由兩個(gè)核心組成部分是 wrapper （父元素）和 items （子元素）。 wrapper 是實(shí)際的 grid(網(wǎng)格)，items 是 grid(網(wǎng)格) 內(nèi)的內(nèi)容。

下面是一個(gè) wrapper 元素，內(nèi)部包含6個(gè) items ：

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

要把 wrapper 元素變成一個(gè) grid(網(wǎng)格)，只要簡(jiǎn)單地把其 display 屬性設(shè)置為 grid 即可：

.wrapper {
    display: grid;
}

但是，這還沒(méi)有做任何事情，因?yàn)槲覀儧](méi)有定義我們希望的 grid(網(wǎng)格) 是怎樣的。它會(huì)簡(jiǎn)單地將6個(gè) div 堆疊在一起。

我已經(jīng)添加了一些樣式，但是這與 CSS Grid 沒(méi)有任何關(guān)系。

Columns(列) 和 rows(行)

為了使其成為二維的網(wǎng)格容器，我們需要定義列和行。讓我們創(chuàng)建3列和2行。我們將使用 grid-template-row 和 grid-template-column 屬性。

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

正如你所看到的，我們?yōu)?grid-template-columns 寫(xiě)入了 3 個(gè)值，這樣我們就會(huì)得到 3 列。 我們想要得到 2 行，因此我們?yōu)?grid-template-rows 指定了2個(gè)值。

這些值決定了我們希望我們的列有多寬（ 100px ），以及我們希望行數(shù)是多高（ 50px ）。 結(jié)果如下：

為了確保你能正確理解這些值與網(wǎng)格外觀之間的關(guān)系，請(qǐng)看一下這個(gè)例子。

.wrapper {
    display: grid;
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 100px 30px;
}

請(qǐng)嘗試?yán)斫馍厦娴拇a，思考一下以上代碼會(huì)產(chǎn)生怎樣的布局。

這是上面代碼的布局的結(jié)果：

非常好理解，使用起來(lái)也非常簡(jiǎn)單是不是？下面我們來(lái)加大一點(diǎn)難度。

放置 items(子元素)

接下來(lái)你需要學(xué)習(xí)的是如何在 grid(網(wǎng)格) 上放置 items(子元素) 。特別注意，這里才是體現(xiàn) Grid 布局超能力的地方，因?yàn)樗沟脛?chuàng)建布局變得非常簡(jiǎn)單。

我們使用與之前相同的 HTML 標(biāo)記，為了幫助我們更好的理解，我們?cè)诿總€(gè) items(子元素) 加上了單獨(dú)的 class ：

<div class="wrapper">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

現(xiàn)在，我們來(lái)創(chuàng)建一個(gè) 3×3 的 grid(網(wǎng)格)：

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

將得到以下布局：

不知道你發(fā)現(xiàn)沒(méi)有，我們只在頁(yè)面上看到 3×2 的 grid(網(wǎng)格)，而我們定義的是 3×3 的 grid(網(wǎng)格)。這是因?yàn)槲覀冎挥?6 個(gè) items(子元素) 來(lái)填滿這個(gè)網(wǎng)格。如果我們?cè)偌?個(gè) items(子元素)，那么最后一行也會(huì)被填滿。

要定位和調(diào)整 items(子元素) 大小，我們將使用 grid-column 和 grid-row 屬性來(lái)設(shè)置：

.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}

我們?cè)谶@里要做的是，我們希望 item1 占據(jù)從第一條網(wǎng)格線開(kāi)始，到第四條網(wǎng)格線結(jié)束。換句話說(shuō)，它將獨(dú)立占據(jù)整行。 以下是在屏幕上顯示的內(nèi)容：

如果你不明白我們?cè)O(shè)置的只有 3 列，為什么有4條網(wǎng)格線呢？看看下面這個(gè)圖像，我畫(huà)了黑色的列網(wǎng)格線：

請(qǐng)注意，我們現(xiàn)在正在使用網(wǎng)格中的所有行。當(dāng)我們把第一個(gè) items(子元素) 占據(jù)整個(gè)第一行時(shí)，它把剩下的 items(子元素) 都推到了下一行。

最后，給你一個(gè)更簡(jiǎn)單的縮寫(xiě)方法來(lái)編寫(xiě)上面的語(yǔ)法：

.item1 {
    grid-column: 1 / 4;
}

為了確保你已經(jīng)正確理解了這個(gè)概念，我們重新排列其他的 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;
}

你可以嘗試在你的腦子里過(guò)一邊上面代碼的布局效果，應(yīng)該不會(huì)很難。

以下是頁(yè)面上的布局效果：

Grid 布局就是這么簡(jiǎn)單，當(dāng)然這里展示的是最簡(jiǎn)單的 Grid 布局概念，還有很多概念在這里沒(méi)講。如果您有任何問(wèn)題，歡迎評(píng)論，我會(huì)盡我所能回答。后續(xù)還會(huì)有更多關(guān)于 Grid 布局概念介紹的文章，敬請(qǐng)關(guān)注。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論