圖文詳解CSS中的Grid布局，你真的可以5分鐘掌握

言

網(wǎng)站的布局是一個(gè)網(wǎng)站設(shè)計(jì)的根本，CSS的Grid布局已經(jīng)成為了未來(lái)網(wǎng)站布局的基本方式。

今天這篇文章我們通過(guò)圖文，一起看看如何自己實(shí)現(xiàn)Grid布局方式。

CSS

第一個(gè)Grid布局

首先我們看看最基本的Grid布局是什么樣的，HTML頁(yè)面的代碼如下所示。

HTML代碼

然后設(shè)置其CSS屬性，這里主要展示容器的CSS屬性，給子元素添加的color屬性就不在這里展示了。

CSS屬性

在頁(yè)面上看到的效果如下，目前因?yàn)闆](méi)有對(duì)子div元素做任何設(shè)置，會(huì)自動(dòng)將子div沿垂直方向排列。

頁(yè)面效果

設(shè)置行和列

為了讓外層的div(wrapper)為一個(gè)網(wǎng)格容器，需要設(shè)置其行數(shù)和列數(shù)，就像一個(gè)表格一樣。

此時(shí)就需要用到grid-template-columns和grid-template-rows兩個(gè)屬性值。

grid-template-columns

用于設(shè)置網(wǎng)格容器的列屬性，其實(shí)就相當(dāng)于列的寬度。當(dāng)我們需要幾列展示時(shí)，就設(shè)置幾個(gè)值，這個(gè)屬性可以接收具體數(shù)值比如100px，也可以接收百分比值，表示占據(jù)容器的寬度。

需要注意的是：當(dāng)給容器設(shè)定了寬度時(shí)，grid-template-columns設(shè)定的百分比值是以容器的寬度值為基礎(chǔ)計(jì)算的。如果未設(shè)置寬度時(shí)，會(huì)一直向上追溯到設(shè)置了寬度的父容器，直到body元素。

比如我們?cè)O(shè)置了以下的CSS屬性。

CSS屬性

可以看出三列寬度加起來(lái)的百分比值為120%，而且wrapper容器并未設(shè)置寬度，會(huì)一直向上追溯到body元素，這樣三列的總寬度已經(jīng)超過(guò)了body的寬度，因此會(huì)出現(xiàn)滾動(dòng)條。

頁(yè)面效果

grid-template-rows

用于設(shè)置網(wǎng)格容器的行屬性，其實(shí)就相當(dāng)于行的高度，其特性與grid-template-columns屬性類(lèi)似。

下面簡(jiǎn)單修改grid-template-columns和grid-template-rows兩個(gè)屬性的值。

CSS值

得到的效果圖如下所示。

效果圖

放置子元素

接下來(lái)我們看看別的情況，通過(guò)CSS屬性設(shè)置3*3的網(wǎng)格。

CSS屬性

在頁(yè)面上的呈現(xiàn)方式如下所示。

頁(yè)面呈現(xiàn)

從頁(yè)面上看我們看不出有什么問(wèn)題，但是打開(kāi)控制臺(tái)后可以發(fā)現(xiàn)，這個(gè)網(wǎng)格已經(jīng)占據(jù)了3*3的空間。它后面的元素只能排列在所有的網(wǎng)格后面。

頁(yè)面實(shí)際情況

不規(guī)則排列

當(dāng)我們需要得到特殊的排列方式，比如占滿(mǎn)整行，占滿(mǎn)整列，二三行合并等等。

這就需要用到grid-column和grid-row屬性，表示行網(wǎng)線(xiàn)和列網(wǎng)線(xiàn)的序號(hào)。通過(guò)設(shè)置start和end值，來(lái)進(jìn)行網(wǎng)格的合并。

網(wǎng)線(xiàn)序號(hào)

我們重新給wrapper容器內(nèi)部的div添加class類(lèi)。

HTML代碼

然后添加以下的CSS代碼，給不同的網(wǎng)格特定的行號(hào)和列號(hào)。

CSS代碼

最終得到的效果圖如下所示。

頁(yè)面效果圖

結(jié)束語(yǔ)

今天這篇文章介紹了CSS中Grid布局的基礎(chǔ)知識(shí)，應(yīng)該可以很快掌握，其他的復(fù)雜點(diǎn)的網(wǎng)格布局大家也可以自己去嘗試。

SS Grid Generator

CSS Grid Generator是一個(gè)由Sarah Drasner創(chuàng)建的免費(fèi)工具。它是一個(gè)可視化設(shè)計(jì)工具，允許咱們創(chuàng)建一個(gè)基本的 grid 布局，然后就可以使用生成對(duì)應(yīng)的代碼，幫助咱們快速布局。

第一次進(jìn)入是界面是這樣子的：

CSS Grid 布局示例

當(dāng)我正在學(xué)習(xí)一些東西時(shí)，我發(fā)現(xiàn)最好的學(xué)習(xí)方法是使用現(xiàn)有的工具構(gòu)建實(shí)用的東西。在本文中，咱們先從一個(gè)簡(jiǎn)單的布局開(kāi)始，然后使用CSS Grid Generator創(chuàng)建在實(shí)際項(xiàng)目中使用所需的代碼。

首先從一個(gè)典型的布局開(kāi)始，如下所示：

接著在 CSS Grid Generator 界面的右側(cè)更新對(duì)應(yīng)的以下內(nèi)容：

行: 4
列: 3
列間距: 20
行間距: 20

間距讓咱們的內(nèi)容之間有一定的空白。可以只使用列間距，但我想在 Header 和 Footer 之前留出一些空白，所以還同時(shí)使用行間距。

接下來(lái)，就是需要定義應(yīng)用程序的不同區(qū)域。在 CSS Grid Generator 中，可以單擊并拖動(dòng)到需要合并地方來(lái)創(chuàng)建一個(gè)區(qū)域。咱們希望Footer跨越整個(gè)網(wǎng)格，側(cè)邊欄占用一個(gè)單元格，主內(nèi)容區(qū)域跨越2列，F(xiàn)ooter 跨越4列,最終效果，如下：

這看起來(lái)有點(diǎn)像咱們想要的布局，但仍然需要定義一些具體的尺寸。在CSS Grid Generator 會(huì)注意到每行和每列旁邊都有一個(gè)輸入框，可用于設(shè)置特定大小。

Header: 100px height
Sidebars: 200px width
Footer: 50px height

這看起來(lái)更像更像咱們想要的布局，但是你可能會(huì)問(wèn)1fr是多少。

軌道可以用任何長(zhǎng)度單位來(lái)定義。Grid還引入了一個(gè)額外的長(zhǎng)度單位，以幫助各位創(chuàng)建靈活的Grid軌道。新的fr單元表示網(wǎng)格容器中可用空間的一小部分。

第二行的1fr會(huì)告訴區(qū)域占用剩余的可用空間。如果將容器設(shè)置為100vh，就會(huì)占據(jù)整個(gè)頁(yè)面的內(nèi)容，列也是如此。

CSS Grid Generated 生成的代碼

點(diǎn)擊“請(qǐng)給我示例中的代碼”就可以查看對(duì)應(yīng)布局生成的 CSS 代碼：

創(chuàng)建一個(gè)simple-layout.htm并添加以下代碼：

接下來(lái)添加上面生成的 CSS:

接著添加對(duì)應(yīng)的標(biāo)簽：

最后添加下面的CSS，它將為.div1 - .div5添加一些背景色：

div:not(.parent) {
  padding: 10px;
  background-color: rgb(199, 199, 199);
}

運(yùn)行：

這看起來(lái)很好，但你希望它占據(jù)整個(gè)瀏覽器窗口。所以需要向.parent類(lèi)添加height: 100vh：

.parent {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 200px;
  grid-template-rows: 100px 1fr 50px;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  height: 100vh;
}

最終效果：

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

兩個(gè)相鄰的網(wǎng)絡(luò)線(xiàn)之間為網(wǎng)絡(luò)軌道。

圖中的同方向 1 和 2， 2 和 3 都是相鄰的網(wǎng)絡(luò)線(xiàn)，當(dāng)然同方向的 1 和 3 或者不同方向的 1 和 2 就不是相鄰的網(wǎng)絡(luò)線(xiàn)。

相鄰的網(wǎng)絡(luò)線(xiàn)為網(wǎng)格軌道，如下，黑色1 和 2 之間就構(gòu)成了網(wǎng)絡(luò)軌道(背景深橘色)：

上面總共有 5 個(gè)網(wǎng)絡(luò)軌道，水平方向灰色 1 和 2， 2 和 3， 3 和 4，豎直方向黑色的 1 和 2， 2 和 3，共 5 個(gè)。

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

兩個(gè)相鄰的列網(wǎng)絡(luò)線(xiàn)和兩個(gè)相鄰的行網(wǎng)絡(luò)線(xiàn)組成的就是網(wǎng)絡(luò)單元，如下面的深橘色背景就是網(wǎng)絡(luò)單元。

網(wǎng)絡(luò)單元要與網(wǎng)絡(luò)項(xiàng)(項(xiàng)目)區(qū)別開(kāi)來(lái)，網(wǎng)絡(luò)項(xiàng)是 Html 中可以找的到 Dom 元素，網(wǎng)絡(luò)單元是在定義容器的時(shí)候，它就會(huì)分割出來(lái)的一個(gè)一個(gè)單元格。

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

四個(gè)網(wǎng)絡(luò)線(xiàn)包圍的總空間。

fr單位(加餐)

剩余空間分配數(shù)，用于在一系列長(zhǎng)度值中分配剩余空間，如果多個(gè)已指定了多個(gè)部分，則剩下的空間根據(jù)各自的數(shù)字按比例分配。

【CSS Grid入門(mén)】看這一篇就夠了：從零開(kāi)始掌握網(wǎng)格布局藝術(shù)

### 引言

CSS Grid布局是近年來(lái)CSS領(lǐng)域的一項(xiàng)重大革新，它為Web開(kāi)發(fā)者提供了一種強(qiáng)大、靈活且直觀(guān)的方式來(lái)創(chuàng)建二維網(wǎng)格布局，徹底改變了我們構(gòu)建網(wǎng)頁(yè)布局的方式。本文將帶你從零開(kāi)始學(xué)習(xí)CSS Grid，通過(guò)一系列詳細(xì)的示例和代碼，讓你一次性掌握這項(xiàng)革命性的布局技術(shù)。

### 一、CSS Grid基礎(chǔ)概念

**1.1 容器與網(wǎng)格項(xiàng)**

- **grid container**：通過(guò)將display屬性設(shè)置為grid或inline-grid，將一個(gè)元素變?yōu)榫W(wǎng)格容器。

```html

</div>

<style>

.grid-container {

display: grid;

/* 其他Grid屬性 */

}

</style>

```

**1.2 網(wǎng)格線(xiàn)與網(wǎng)格單元格**

- **grid lines**：網(wǎng)格線(xiàn)是網(wǎng)格布局中的分界線(xiàn)，分為行(grid-row)和列(grid-column)。

- **grid cells**：相鄰的行和列網(wǎng)格線(xiàn)之間的區(qū)域稱(chēng)為網(wǎng)格單元格。

### 二、CSS Grid布局屬性詳解

**2.1 網(wǎng)格模板定義**

- `grid-template-columns` 和 `grid-template-rows`：定義每一行和每一列的大小。

```css

.grid-container {

grid-template-columns: repeat(3, 1fr); /* 3等份 */

grid-template-rows: auto 1fr; /* 第一行自適應(yīng)，第二行填滿(mǎn)剩余空間 */

}

```

**2.2 網(wǎng)格區(qū)域命名與定位**

- `grid-template-areas`：為每個(gè)網(wǎng)格項(xiàng)指定區(qū)域名稱(chēng)并布局。

```css

.grid-container {

grid-template-areas:

"header header header"

"main main sidebar"

"footer footer footer";

}

.header {

grid-area: header;

}

.main {

grid-area: main;

}

.sidebar {

grid-area: sidebar;

}

.footer {

grid-area: footer;

}

```

**2.3 網(wǎng)格項(xiàng)目的定位**

- `grid-column` 和 `grid-row`：直接指定網(wǎng)格項(xiàng)目的起始和結(jié)束網(wǎng)格線(xiàn)。

```css

.item-a {

grid-column: 1 / 3; /* 從第一列到第三列 */

grid-row: 2 / 4; /* 從第二行到第四行 */

}

```

### 三、CSS Grid進(jìn)階特性

**3.1 自動(dòng)布局：fr單位與auto-fill/auto-fit**

```css

.grid-container {

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 根據(jù)窗口大小自動(dòng)填充列 */

}

```

**3.2 對(duì)齊與間距**

- `justify-items`、`align-items`、`justify-content`、`align-content`：控制網(wǎng)格項(xiàng)目和行/列的對(duì)齊方式。

```css

.grid-container {

justify-items: center; /* 橫向居中 */

align-items: start; /* 縱向頂部對(duì)齊 */

justify-content: space-between; /* 行間間距均勻分布 */

}

```

**3.3 動(dòng)態(tài)網(wǎng)格：響應(yīng)式布局**

根據(jù)不同的斷點(diǎn)調(diào)整網(wǎng)格布局，實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。

```css

@media (max-width: 768px) {

.grid-container {

grid-template-columns: 1fr; /* 在小屏幕下變?yōu)閱瘟胁季?*/

}

```

### 四、實(shí)戰(zhàn)案例：使用CSS Grid構(gòu)建常見(jiàn)布局

**4.1 兩欄布局**

```html

</div>

<style>

.grid-container {

display: grid;

grid-template-columns: 200px 1fr;

}

</style>

```

**4.2 復(fù)雜網(wǎng)格布局（例如，雜志布局）**

此處提供一個(gè)復(fù)雜的網(wǎng)格布局示例，通過(guò)CSS Grid實(shí)現(xiàn)類(lèi)似雜志布局的復(fù)雜排版。

```html

```

### 結(jié)語(yǔ)

通過(guò)這篇全面的CSS Grid入門(mén)教程，你已掌握了網(wǎng)格布局的基本要素與實(shí)用技巧。然而，CSS Grid的奧妙遠(yuǎn)不止于此，它的強(qiáng)大之處在于其無(wú)比靈活和自由的布局能力。繼續(xù)深入研究和實(shí)踐，你將在項(xiàng)目中發(fā)現(xiàn)更多的可能性，使你的Web設(shè)計(jì)變得更加優(yōu)雅、高效。祝你在CSS Grid的道路上越走越遠(yuǎn)，享受到它帶來(lái)的便利與樂(lè)趣！

在線(xiàn)咨詢(xún)

上一篇：騰訊大佬高贊的700集編程教程，不僅一分錢(qián)不要，好評(píng)
下一篇：JS 打開(kāi)一個(gè)鏈接

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

圖文詳解CSS中的Grid布局，你真的可以5分鐘掌握

言

第一個(gè)Grid布局

設(shè)置行和列

放置子元素

不規(guī)則排列

結(jié)束語(yǔ)

SS Grid Generator

CSS Grid 布局示例

CSS Grid Generated 生成的代碼

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

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

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

fr單位(加餐)

您的項(xiàng)目需求