整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
網站的布局是一個網站設計的根本，CSS的Grid布局已經成為了未來網站布局的基本方式。
今天這篇文章我們通過圖文，一起看看如何自己實現Grid布局方式。
CSS
首先我們看看最基本的Grid布局是什么樣的，HTML頁面的代碼如下所示。
HTML代碼
然后設置其CSS屬性，這里主要展示容器的CSS屬性，給子元素添加的color屬性就不在這里展示了。
CSS屬性
在頁面上看到的效果如下，目前因為沒有對子div元素做任何設置，會自動將子div沿垂直方向排列。
頁面效果
為了讓外層的div(wrapper)為一個網格容器，需要設置其行數和列數，就像一個表格一樣。
此時就需要用到grid-template-columns和grid-template-rows兩個屬性值。
grid-template-columns
用于設置網格容器的列屬性，其實就相當于列的寬度。當我們需要幾列展示時，就設置幾個值，這個屬性可以接收具體數值比如100px，也可以接收百分比值，表示占據容器的寬度。
需要注意的是：當給容器設定了寬度時，grid-template-columns設定的百分比值是以容器的寬度值為基礎計算的。如果未設置寬度時，會一直向上追溯到設置了寬度的父容器，直到body元素。
比如我們設置了以下的CSS屬性。
CSS屬性
可以看出三列寬度加起來的百分比值為120%，而且wrapper容器并未設置寬度，會一直向上追溯到body元素，這樣三列的總寬度已經超過了body的寬度，因此會出現滾動條。
頁面效果
grid-template-rows
用于設置網格容器的行屬性，其實就相當于行的高度，其特性與grid-template-columns屬性類似。
下面簡單修改grid-template-columns和grid-template-rows兩個屬性的值。
CSS值
得到的效果圖如下所示。
效果圖
接下來我們看看別的情況，通過CSS屬性設置3*3的網格。
CSS屬性
在頁面上的呈現方式如下所示。
頁面呈現
從頁面上看我們看不出有什么問題，但是打開控制臺后可以發現，這個網格已經占據了3*3的空間。它后面的元素只能排列在所有的網格后面。
頁面實際情況
當我們需要得到特殊的排列方式，比如占滿整行，占滿整列，二三行合并等等。
這就需要用到grid-column和grid-row屬性，表示行網線和列網線的序號。通過設置start和end值，來進行網格的合并。
網線序號
我們重新給wrapper容器內部的div添加class類。
HTML代碼
然后添加以下的CSS代碼，給不同的網格特定的行號和列號。
CSS代碼
最終得到的效果圖如下所示。
頁面效果圖
今天這篇文章介紹了CSS中Grid布局的基礎知識，應該可以很快掌握，其他的復雜點的網格布局大家也可以自己去嘗試。
CSS Grid Generator是一個由Sarah Drasner創建的免費工具。它是一個可視化設計工具，允許咱們創建一個基本的 grid 布局，然后就可以使用生成對應的代碼，幫助咱們快速布局。
第一次進入是界面是這樣子的：
當我正在學習一些東西時，我發現最好的學習方法是使用現有的工具構建實用的東西。 在本文中，咱們先從一個簡單的布局開始，然后使用CSS Grid Generator創建在實際項目中使用所需的代碼。
首先從一個典型的布局開始，如下所示：
接著在 CSS Grid Generator 界面的右側更新對應的以下內容：
間距讓咱們的內容之間有一定的空白。可以只使用列間距，但我想在 Header 和 Footer 之前留出一些空白，所以還同時使用行間距。
接下來，就是需要定義應用程序的不同區域。在 CSS Grid Generator 中，可以單擊并拖動到需要合并地方來創建一個區域。咱們希望Footer跨越整個網格，側邊欄占用一個單元格，主內容區域跨越2列，Footer 跨越4列,最終效果，如下：
這看起來有點像咱們想要的布局，但仍然需要定義一些具體的尺寸。 在CSS Grid Generator 會注意到每行和每列旁邊都有一個輸入框，可用于設置特定大小。
這看起來更像更像咱們想要的布局，但是你可能會問1fr是多少。
軌道可以用任何長度單位來定義。Grid還引入了一個額外的長度單位，以幫助各位創建靈活的Grid軌道。新的fr單元表示網格容器中可用空間的一小部分。
第二行的1fr會告訴區域占用剩余的可用空間。如果將容器設置為100vh，就會占據整個頁面的內容，列也是如此。
點擊“請給我示例中的代碼”就可以查看對應布局生成的 CSS 代碼：
創建一個simple-layout.htm并添加以下代碼：
接下來添加上面生成的 CSS:
接著添加對應的標簽：
最后添加下面的CSS，它將為.div1 - .div5添加一些背景色：
div:not(.parent) {
padding: 10px;
background-color: rgb(199, 199, 199);
}運行：
這看起來很好，但你希望它占據整個瀏覽器窗口。所以需要向.parent類添加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;
}最終效果：
兩個相鄰的網絡線之間為網絡軌道。
圖中的同方向 1 和 2， 2 和 3 都是相鄰的網絡線，當然同方向的 1 和 3 或者不同方向的 1 和 2 就不是相鄰的網絡線。
相鄰的網絡線為網格軌道，如下，黑色1 和 2 之間就構成了網絡軌道(背景深橘色)：
上面總共有 5 個網絡軌道，水平方向灰色 1 和 2， 2 和 3， 3 和 4，豎直方向黑色的 1 和 2， 2 和 3，共 5 個。
兩個相鄰的列網絡線和兩個相鄰的行網絡線組成的就是網絡單元，如下面的深橘色背景就是網絡單元。
網絡單元要與網絡項(項目)區別開來，網絡項是 Html 中可以找的到 Dom 元素，網絡單元是在定義容器的時候，它就會分割出來的一個一個單元格。
四個網絡線包圍的總空間。
剩余空間分配數，用于在一系列長度值中分配剩余空間，如果多個已指定了多個部分，則剩下的空間根據各自的數字按比例分配。
【CSS Grid入門】看這一篇就夠了：從零開始掌握網格布局藝術
### 引言
CSS Grid布局是近年來CSS領域的一項重大革新，它為Web開發者提供了一種強大、靈活且直觀的方式來創建二維網格布局，徹底改變了我們構建網頁布局的方式。本文將帶你從零開始學習CSS Grid，通過一系列詳細的示例和代碼，讓你一次性掌握這項革命性的布局技術。
### 一、CSS Grid基礎概念
**1.1 容器與網格項**
- **grid container**：通過將display屬性設置為grid或inline-grid，將一個元素變為網格容器。
```html
<div class="grid-container">
<!-- 網格項 -->
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<!-- 更多網格項... -->
</div>
<style>
.grid-container {
display: grid;
/* 其他Grid屬性 */
}
</style>
```
**1.2 網格線與網格單元格**
- **grid lines**：網格線是網格布局中的分界線，分為行(grid-row)和列(grid-column)。
- **grid cells**：相鄰的行和列網格線之間的區域稱為網格單元格。
### 二、CSS Grid布局屬性詳解
**2.1 網格模板定義**
- `grid-template-columns` 和 `grid-template-rows`：定義每一行和每一列的大小。
```css
.grid-container {
grid-template-columns: repeat(3, 1fr); /* 3等份 */
grid-template-rows: auto 1fr; /* 第一行自適應，第二行填滿剩余空間 */
}
```
**2.2 網格區域命名與定位**
- `grid-template-areas`：為每個網格項指定區域名稱并布局。
```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 網格項目的定位**
- `grid-column` 和 `grid-row`：直接指定網格項目的起始和結束網格線。
```css
.item-a {
grid-column: 1 / 3; /* 從第一列到第三列 */
grid-row: 2 / 4; /* 從第二行到第四行 */
}
```
### 三、CSS Grid進階特性
**3.1 自動布局：fr單位與auto-fill/auto-fit**
```css
.grid-container {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 根據窗口大小自動填充列 */
}
```
**3.2 對齊與間距**
- `justify-items`、`align-items`、`justify-content`、`align-content`：控制網格項目和行/列的對齊方式。
```css
.grid-container {
justify-items: center; /* 橫向居中 */
align-items: start; /* 縱向頂部對齊 */
justify-content: space-between; /* 行間間距均勻分布 */
}
```
**3.3 動態網格：響應式布局**
根據不同的斷點調整網格布局，實現響應式設計。
```css
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr; /* 在小屏幕下變為單列布局 */
}
}
```
### 四、實戰案例：使用CSS Grid構建常見布局
**4.1 兩欄布局**
```html
<div class="grid-container">
<div class="sidebar">側邊欄</div>
<div class="main">主要內容區</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: 200px 1fr;
}
</style>
```
**4.2 復雜網格布局（例如，雜志布局）**
此處提供一個復雜的網格布局示例，通過CSS Grid實現類似雜志布局的復雜排版。
```html
<!-- 省略布局HTML代碼 -->
```
### 結語
通過這篇全面的CSS Grid入門教程，你已掌握了網格布局的基本要素與實用技巧。然而，CSS Grid的奧妙遠不止于此，它的強大之處在于其無比靈活和自由的布局能力。繼續深入研究和實踐，你將在項目中發現更多的可能性，使你的Web設計變得更加優雅、高效。祝你在CSS Grid的道路上越走越遠，享受到它帶來的便利與樂趣！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
