當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

grid网格布局基础(一)

發布時間：2023/12/14 编程问答 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 grid网格布局基础(一) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. grid布局簡介

CSS Grid(網格) 布局，與 flexbox 的一維布局系統不同，是一個二維的基于網格的布局系統，它可以同時處理列和行，Grid(網格) 布局是第一個專門為解決布局問題而創建的 CSS 模塊。
Grid布局和Flex布局有很多相似之處，Grid也分容器和項目，采用grid布局的元素，被稱為grid容器(grid container)，簡稱“容器”，其下的所有直接子元素自動成為容器成員，稱為grid項目(grid item)，簡稱“項目”。

2. 基本概念

上面說到，grid布局和flex雖有相似之處，但grid布局更強大，它不僅僅只有容器和項目，還有間距、區域、內容、行、列這些屬性我們都是可以通過grid布局來控制的，如下圖：
這張圖還是比較重要的，大家可以記住這種結構，后面小shy講解grid的一些屬性的時候就會很容易明白其效果了。

廢話不多說，現在進入正題，歡迎各位進入grid支配的世界！

3. grid屬性列表

grid屬性和flex屬性類似，也是分容器屬性和項目屬性兩種類型。
容器屬性

display
grid-template-columns
grid-template-rows
row-gap
column-gap
gap
grid-template-areas
grid-auto-flow
justify-items
align-items
place-items
justify-content
align-content
place-content
grid-auto-columns
grid-auto-rows

項目屬性

grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self
place-self

大家乍一看是不是覺得grid的屬性真的非常多啊，怎么記得住呀，其實大家仔細看一下，他們都是很多屬性一套一套的，記住了一個，就很容易想到跟它相關的屬性，當大家上手練習的時候就會發現并沒有那么難記，并且你會在學習的過程中不由自主的感覺grid的強大之處。下面小shy帶大家開始逐一了解grid的屬性。

容器屬性

結構樣式準備

為方便演示，小shy先在這里準備好結構(添加了一些樣式)，下面的屬性講解有一部分示例會按照這個結構來講解：

效果如下：

1. display

將元素定義為網格容器，并為其內容建立新的網格格式上下文；
值：

grid: 生成一個塊級網格；
inline-grid：生成一個內聯網格。

.container {display: grid | inline-grid; }

2. grid-template-columns / grid-template-rows 很重要

大家從上面也了解到grid布局又稱網格布局，那網格肯定就是行和列交叉形成的，那就有行和列之分，大家在學習grid的時候一定要把行和列的概念牢記于心，這對于掌握grid是比較重要的。

grid-template-columns / grid-template-rows：使用空格分隔的值列表，用來定義網格的列和行。這些值表示網格軌道(Grid Track) 大小，它們之間的空格表示網格線。

grid-template-columns后跟由空格分隔的值，表示分隔成多少列，每列占的寬度是多少；
grid-template-rows后跟由空格分隔的值，表示分隔成多少行，每列占的高度是多少；

.main {display: grid; // 給.main添加gridwidth: 600px;height: 600px;border: 10px solid skyblue;grid-template-columns: 100px 100px 100px 100px; // 4列每一列的寬度分別為 100px 100px 100px 100pxgrid-template-rows: 100px 100px 100px; // 3行每一行的高度分別為 100px 100px 100px }

repeat(m，n)

如果要定義100行和100列的話，我們總不能寫一百個數值吧。repeat就是用來解決這個問題的。
repeat(m, n)：定義多少列/行，每一列/行占多少空間；

.main {display: grid; width: 600px;height: 600px;border: 10px solid skyblue;grid-template-columns: repeat(4, 100px); // 等同于: grid-template-columns: 100px 100px 100px 100px;grid-template-rows: repeat(3, 100px); // 等同于: grid-template-rows: 100px 100px 100px }

fr

fr: fr 單元允許你用等分網格容器剩余可用空間來設置網格軌道(Grid Track) 的大小；

.main {display: grid; width: 600px;height: 600px;border: 10px solid skyblue;grid-template-columns: repeat(4, 1fr); // 表示分為4列，每一列的寬度為容器寬度的四分之一grid-template-rows: repeat(3, 1fr); // 表示分為3行，每一行的高度為容器寬度的三分之一 }

也可以這樣寫：

grid-template-columns: 1fr 2fr 3fr; 分3列，第一列占容器寬度的六分之一: 1 / (1 + 2 + 3) 第二列占容器寬度的六分之二: 2 / (1 + 2 + 3) 第三列占容器寬度的六分之三: 2 / (1 + 2 + 3)

auto

auto：占滿容器的剩余的部分；

grid-template-columns: 100px auto 100px 100px; grid-template-rows: 100px auto 100px;

效果如下:

網格線命名

如果沒有給網格線命名，軌道值之間僅有空格時，網格線會被自動分配數字名稱;
給網格線指定確切的命名：

.container {grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; }

3. column-gap / row-gap / gap

column-gap：列與列之間的間距；
row-gap：行與行之間的間距；
gap: column-gap 和 row-gap的復合寫法，row-gap column-gap。

.main {display: grid; width: 600px;height: 600px;border: 10px solid skyblue;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(3, 1fr);column-gap: 10px;row-gap: 10px;// 這兩個屬性的復合寫法：gap: 20px 10px; }

效果如下：

4. grid-template-areas

通過引用 grid-area 屬性指定的網格區域(Grid Area) 名稱來定義網格模板。重復網格區域的名稱導致內容跨越這些單元格。一個點號（.）代表一個空單元格。這個語法本身可視作網格的可視化結構，它的值有三個：

<grid-area-name>：由網格項的 grid-area 指定的網格區域名稱；
.(點)：代表一個空的網格單元；
none: 不定義網格區域。
創建一個 4 列寬 3 行高的網格。整個頂行將由 header 區域組成。中間一排將由兩個 main 區域，一個是空單元格，一個 sidebar 區域組成。最后一行全是 footer 區域組成：

.item-a {grid-area: header; } .item-b {grid-area: main; } .item-c {grid-area: sidebar; } .item-d {grid-area: footer; }.container {grid-template-columns: 50px 50px 50px 50px;grid-template-rows: auto;grid-template-areas: "header header header header""main main . sidebar""footer footer footer footer"; }

你的聲明中的每一行都需要有相同數量的單元格。

你可以使用任意數量的相鄰的點. 來聲明單個空單元格。只要這些點.之間沒有空隙隔開，他們就代表一個單獨的單元格。

注意你不能用這個語法來命名網格線，只是命名網格區域。當你使用這種語法時，區域兩端的網格線實際上會自動命名。如果你的網格區域的名字是 foo，該區域的起始行網格線和起始列網格線的名稱將為 foo-start，而最后一條行網格線和最后一條列網格線的名稱將為 foo-end。這意味著某些網格線可能有多個名字，如上例中最左邊的網格線，它將有三個名稱：header-start，main-start 和 footer-start 。

5. grid-auto-flow

grid-auto-flow: 定義項目排列方式，有兩個值 row 和 column，默認是row，橫向排列。

.main {display: grid;width: 600px;height: 600px;border: 10px solid skyblue;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(3, 1fr);gap: 10px;grid-auto-flow: column; }

效果如下：

6. justify-items / align-items

justify-items: start | end | center | stretch，表示項目在網格內的水平方向的排列方式；
align-items: start | end | center | stretch，表示項目在網格內的垂直方向的排列方式；
place-items: <align-items> <justify-items> 組合寫法;

start：內容與網格區域的左端/頂端對齊

end：內容內容與網格區域的右端/底部對齊

center：內容位于網格區域的中間/垂直中心位置

stretch（默認值）：內容寬度/高度占據整個網格區域空間

7. justify-content / align-content

有時，你的網格合計大小可能小于其網格容器(grid container) 大小。如果你的所有網格項(grid items) 都使用像 px 這樣的非靈活單位設置大小，就可能出現這種情況。在這種情況下，您可以設置網格容器內的網格的對齊方式。

start：網格與網格容器的左邊/頂部對齊

end：網格與網格容器的右邊/底部對齊

center：網格與網格容器的中間對齊

stretch：調整grid item 的大小，讓寬度/高度填充整個網格容器

space-around：在 grid item 之間設置均等寬度/高度的空白間隙，其外邊緣間隙大小為中間空白間隙寬度的一半

space-between：在 grid item 之間設置均等寬度/高度空白間隙，其外邊緣無間隙

space-evenly：在每個 grid item 之間設置均等寬度/高度的空白間隙，包括外邊緣

8. grid-auto-columns / grid-auto-rows

設置多出來的項目的寬和高。

.main {display: grid;width: 600px;height: 600px;border: 10px solid skyblue;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);gap: 10px;grid-auto-rows: 50px; }

上述代碼設置了一個 3 * 3的區域，會多出來一個項目，這個項目所在的列寬度是確定的，不在規定的三行內，我們給這個多余的項目設置了高度(grid-auto-rows: 50px; )如下：

以上就是容器的所有的屬性的講解，grid的屬性確實比較多，需要大家慢慢消化練習，后面小shy會分享出項目自身的屬性，謝謝！

總結

以上是生活随笔為你收集整理的grid网格布局基础(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。