【不同的CSS】一文掌握 Grid 佈局(長篇警告)

時間  2021-08-14
標籤 css html 算法 跨域 瀏覽器 markdown 網絡 函數 oop 佈局 欄目 CSS 简体版
原文   原文鏈接

【不同的CSS】一文掌握 Grid 佈局(長篇警告)

若彼岸繁華落盡，誰陪我看落日流年css

寫在前面

對 CSS 佈局掌握程度決定你在 Web 開發中的開發頁面速度。隨着 Web 技術的不斷革新，實現各類佈局的方式已經多得數不勝數了。html

最近利用碎片時間，大概用了半個月的時間整理了一個系列，本系列文章總結了 CSS 中的各類佈局，以及實現方式及其經常使用技巧。讓你經過該系列文章對 CSS 佈局有一個新的認識。算法

該系列的導航帖點我進入，裏面能夠快速跳轉到你想了解的文章(建議收藏)跨域

Grid 佈局(網格佈局)是 CSS 最新的也是最強大的一種佈局方案。瀏覽器

文章概述

因爲篇幅較長(請謹慎閱讀)，下圖涵蓋了本篇文章的主要知識點markdown

正文開始網絡

基本概念

網格：網格是一組相交的水平線和垂直線，它定義了網格的列和行，咱們能夠將網格元素放置在與這些行和列相關的位置上。函數

網格容器: 所謂的網格容器就是全部網格項的父元素，其 display 的值 爲 grid。oop

網格項: 即網格容器的子元素(不包含子元素的子元素)。佈局

網格線: 即組成網格項的分界線，Grid 會爲咱們建立編號的網格線來讓咱們來定位每個網格元素。 例以下面這個三列兩行的網格中，就擁有四條縱向的網格線。

網格軌道: 一個網格軌道就是網格中任意兩條線之間的空間。在下圖中你能夠看到一個高亮的軌道——網格的第一個行軌道。

1_Grid_Track

網格單元: 兩個相鄰的列網格線和兩個相鄰的行網格線組成的是網格單元。在下面的圖中，我會將第一個網格單元做高亮處理。

1_Grid_Cell

網格區域: 四個網格線包圍的總空間。下圖高亮的網格區域擴展了2列以及2行。

1_Grid_Area

fr (單位): 剩餘空間分配數。用於在一系列長度值中分配剩餘空間，若是多個已指定了多個部分，則剩下的空間根據各自的數字按比例分配。

容器屬性

display 屬性

display 屬性用於指定一個容器採用網格容器。語法以下：

.container {
  display: grid | inline-grid;
  /* * grid: 生成塊級網格 * inline-grid: 生成行內網格 */
}
複製代碼

值得注意的是設爲網格容器時，網格項的 float、display: inline-block、display: table-cell、vertical-align 和 column-* 等設置都將失效。

示例代碼以下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>display 屬性</title>
        <link rel="stylesheet" href="./init.css" />
        <style> .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; } </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

複製代碼

init.css

body { margin: 0; padding: 20px; }
.item { height: 300px; width: 300px; line-height: 300px; text-align: center; font-size: 140px; }
.item1 { background-color: #e6005c; }
.item2 { background-color: #777bce; }
.item3 { background-color: #c9780c; }
.item4 { background-color: #fffae8; }
.item5 { background-color: #ce3b3b; }
.item6 { background-color: #e666ff; }
.item7 { background-color: #f4ea20; }
.item8 { background-color: #b4a4ca; }
複製代碼

執行結果以下：

image-20210508214141493

grid-template

1. grid-template-columns 屬性 和 grid-template-rows 屬性

grid-template-columns 屬性 和 grid-template-rows 屬性,用來指定網格的列寬以及行高，以空格分隔，語法結構以下：

.container {
	grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}
複製代碼

屬性值

  • 軌道大小(track-size): 能夠使用任意 css 長度、百分比、或者分數、或者 fr 單位。
  • 網格線名字(line-name): 能夠選擇任意名字

示例代碼以下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>grid-template 屬性</title>
        <link rel="stylesheet" href="./init.css" />
        <style> .container { background-color: #fef3c9; display: grid; width: 1600px; height: 800px; margin: 0 auto; grid-template-columns: 300px auto 300px 20%; grid-template-rows: 1fr 1fr; } .item2, .item3, .item6, .item7 { width: auto; } </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>
複製代碼

執行結果以下所示：

image-20210508222658446

2. 網格線的名稱

grid-template-columns 屬性 和 grid-template-rows 屬性 裏面，還能夠使用方括號 [] ，指定每一根網格線的名字，方便之後的引用。

示例代碼以下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>網格線的名稱</title>
        <link rel="stylesheet" href="./init.css" />
        <style> .container { background-color: #fef3c9; display: grid; width: 1600px; height: 700px; margin: 0 auto; grid-template-columns: [c1] 320px [c2] 3fr [c3] 2fr [c4] 20% [c5]; grid-template-rows: [r1] 1fr [r2] 1fr [r3]; } </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

複製代碼

效果圖以下：

image-20210508224148105

3. repeat() 函數

有的時候，咱們須要編寫一樣的值，尤爲是在網格多的時候，就顯得尤其的麻煩，這個時候 repeat() 函數就幫助咱們解決了這個問題。

該函數適用於 CSS Grid 屬性中 grid-template-columns 和 grid-template-rows.語法規則以下：

.container {
  grid-template-columns: repeat(repeat, value);
}
複製代碼

屬性值：

  • repeat: 表示重複的次數

    可選值：

    • number: 整數，肯定確切的重複次數
    • auto-fill: 以網格項爲準自動填充
    • auto-fit: 以網格容器爲準自動填充

  • value: 表示重複的值

    可選值：

    • length: 非負長度
    • percentage: 相對於列軌道中網格容器的內聯大小的非負百分比，以及行軌道中網格容器的塊長寬。
    • flex: 單位爲 fr 的非負維度，指定軌道彈性佈局的係數值。

示例代碼以下所示：

.container {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  /* 等於 */
  grid-template-columns: repeat(6, 1fr);
}
複製代碼

4. minmax() 函數

minmax() 函數定義了一個長寬範圍的閉區間，該函數適用於 CSS Grid 屬性中 grid-template-columns 和 grid-template-rows 語法規則以下：

.container {
  grid-template-columns: minmax(minValue, maxValue);
}
複製代碼

可選值：

  • length: 非負長度
  • percentage: 相對於列軌道中網格容器的內聯大小的非負百分比，以及行軌道中網格容器的塊長寬。
  • flex: 單位爲 fr 的非負維度，指定軌道彈性佈局的係數值。

示例代碼以下所示：

.container {
  grid-template-columns: minmax(100px, 400px);
}
複製代碼

最小100px最大400px

5. grid-template-areas 屬性

經過引用 grid-area 屬性指定的網格區域的名稱來定義網格模板。語法結構以下：

.contaienr {
  grid-template-areas: none |
    'grid-area-name | . grid-area-name | . grid-area-name | . ...'
    'grid-area-name | . grid-area-name | . grid-area-name | . ...'
}
複製代碼

屬性值

  • grid-area-name: 使用 grid-area 屬性設置的網格區域名稱
  • . : 點號表示一個空網格單元
  • none: 沒有定義網格區域。

示例代碼以下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>grid-template-areas 屬性</title>
        <link rel="stylesheet" href="./init.css" />
        <style> .container { background-color: #fef3c9; /* 1. 設置容器元素爲 網格容器 */ display: grid; width: 1600px; height: 800px; margin: 0 auto; /* 劃分區域，當前區域爲 三行 兩列 */ grid-template-areas: 'header header' 'nav main' 'footer footer'; /* 3. 設置各區域的寬度和高度 */ grid-template-columns: 300px 1fr; grid-template-rows: 200px auto 200px; } .item { width: auto; height: 200px; line-height: 200px; } .header { /* 4. 指定當前元素所在的區域位置，從 grid-template-areas 選取值 */ grid-area: header; } .nav { /* 4. 指定當前元素所在的區域位置，從 grid-template-areas 選取值 */ grid-area: nav; } .main { /* 4. 指定當前元素所在的區域位置，從 grid-template-areas 選取值 */ grid-area: main; } .footer { /* 4. 指定當前元素所在的區域位置，從 grid-template-areas 選取值 */ grid-area: footer; } .nav, .main { height: auto; line-height: 400px; } </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item header">header</div>
            <div class="item2 item nav">nav</div>
            <div class="item3 item main">main</div>
            <div class="item4 item footer">footer</div>
        </div>
    </body>
</html>
複製代碼

執行結果以下：

image-20210509134334506

值得注意的是區域的命名會影響到網格線。每一個區域的起始網格線，會自動命名爲 區域名-start ，終止網格線自動命名爲 區域名-end 。

好比，區域名爲 header ，則起始位置的水平網格線和垂直網格線叫作 header-start ，終止位置的水平網格線和垂直網格線叫作 header-end 。

grid-template 屬性

該屬性是 grid-template-rows 、 grid-template-columns 和 grid-template-areas 屬性的簡寫。語法結構以下所示：

.container {
  grid-template: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]? ;
}
複製代碼

屬性值

  • none: 將三個屬性都設置爲初始值，也就是一行一列一區域(瞭解)。
  • grid-template-rows / grid-template-columns: 把 grid-template-rows 和 grid-template-columns 設置爲指定值，於此同時，設置 grid-template-areas 爲 none
  • [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?: 設 grid-template-areas 爲列得 <string> 、 grid-template-columns 爲 <explicit-track-list> （默認爲none）、 grid-template-rows 爲 <track-size>（默認爲auto）並拼接尺寸先後所定義之行。

示例代碼以下所示：

grid-template-areas:
            'header header'
            'nav main'
            'footer footer';
grid-template-columns: 300px 1fr;
grid-template-rows: 200px auto 200px;

/* 簡寫以下 */

grid-template:
              [row1-start] 'header header' 200px [row1-end]
              [row2-start] 'nav main' auto [row2-end]
              [row3-start] 'footer footer' 200px [row3-end]
              / 300px 1fr;
複製代碼

上面兩個代碼最終的執行效果是相同的。

不過按照代碼的可讀性來看，並不推薦使用簡寫方式

gap 屬性

gap 屬性是 row-gap 和 column-gap 屬性的簡寫。

該屬性用於指定網格線的大小，能夠想象爲設置列 / 行之間的間距的寬度。語法結構以下：

.contianer {
  column-gap: <line-size>;
  row-gap: <line-size>;
  /* 若是省略第二個值，瀏覽器認爲第二個值等於第一個值。 */
  gap: <line-size> <line-size>;
}
複製代碼

屬性值

  • <line-size>: 長度值，例如 20px。

示例代碼以下(基於上面那一段代碼來寫)：

.container {
  /* 寫法 1 */
  column-gap: 10px;
  row-gap: 10px;
  /* 寫法 2 */
  gap: 10px 10px;
  /* 寫法 3 */
  gap: 10px;
}
複製代碼

執行結果以下：

image-20210509150302498

值得注意的是 gap 、column-gap 和 row-gap 屬性在以前是有 grid- 的前綴的，即 grid-gap 、grid-column-gap 和 grid-row-gap。在使用的過程當中，爲了保證有效，咱們能夠這兩個屬性一塊兒寫。

items 屬性

1. align-items 屬性

沿着列軸對齊網格內的內容。語法結構以下：

.container {
  align-items: start | end | center | stretch;
}
複製代碼

屬性值：

  • start: 內容與網格區域的頂端對齊
  • end: 內容與網格區域的底部對齊
  • center: 內容位於網格區域的垂直中心位置
  • stretch: 內容高度佔據整個網格區域空間(默認值)

2. justify-items 屬性

沿着行軸對齊網格內的內容。語法結構以下：

.container {
  justify-items: start | end | center | stretch;
}
複製代碼

屬性值：

  • start: 內容與網格區域的左端對齊
  • end: 內容與網格區域的右部對齊
  • center: 內容位於網格區域的水平中心位置
  • stretch: 內容寬度佔據整個網格區域空間(默認值)

3. place-items 屬性

place-items 是一個簡寫屬性，使用此屬性能夠同時設置列軸對齊和行軸對齊，語法結構以下所示：

.container {
  place-items: align-items justify-items;
}
複製代碼

若是隻寫一個值，第二個值默認與第一個值相同。

示例代碼以下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>grid-template 屬性</title>
        <link rel="stylesheet" href="./init.css" />
        <style> .container { background-color: #fef3c9; display: grid; width: 1600px; height: 800px; margin: 0 auto; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; /* align-items 屬性，控制網格項垂直對齊方式 */ align-items: end; /* justify-items 屬性，控制網格項水平對齊方式 */ justify-items: center; /* place-items 屬性，是 align-items 屬性 和 justify-items 的簡寫形式 若是隻寫一個值，第二個值默認與第一個值相同 */ place-items: end center; } .item { height: 200px; width: 200px; line-height: 200px; } </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

複製代碼

執行結果以下所示：

image-20210509165817094

content 屬性

1. align-content 屬性

設置網格容器內的網格沿着列軸對齊網格的對齊方式。語法結構以下：

.container {
  align-content : start | end | center | stretch | space-around | space-between | space-evenly;
}
複製代碼

屬性值：

  • start: 網格與網格容器的頂部對齊
  • end: 網格與網格容器的底部對齊
  • center: 網格與網格容器的垂直中間對齊
  • stretch: 調整網格項的大小，讓高度填充整個網格容器
  • space-around:在網格項之間設置均等高度的空白間隙,其外邊緣間隙大小爲中間空白間隙寬度的一伴
  • space-between:在網格項之間設置均等高度空白間隙，其外邊緣無間隙
  • space-evenly:在每一個網格項之間設置均等高度的空白間隙,包括外邊緣

2. justify-content 屬性

設置網格容器內的網格沿着行軸對齊網格的對齊方式。語法結構以下：

.container {
  align-content : start | end | center | stretch | space-around | space-between | space-evenly;
}
複製代碼

屬性值：

  • start: 網格與網格容器的左部對齊
  • end: 網格與網格容器的右部對齊
  • center: 網格與網格容器的水平中間對齊
  • stretch: 調整網格項的大小，讓高度填充整個網格容器
  • space-around:在網格項之間設置均等寬度的空白間隙,其外邊緣間隙大小爲中間空白間隙寬度的一伴
  • space-between:在網格項之間設置均等寬度空白間隙，其外邊緣無間隙
  • space-evenly:在每一個網格項之間設置均等寬度的空白間隙,包括外邊緣

3. place-content 屬性

place-content 屬性是 align-content 和 justify-content 的簡寫屬性，，語法結構以下所示：

.container {
  place-content: align-content justify-content;
}
複製代碼

若是隻寫一個值，第二個值默認與第一個值相同。

示例代碼以下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>content 屬性</title>
        <link rel="stylesheet" href="./init.css" />
        <style> .container { background-color: #fffae8; display: grid; width: 1600px; height: 800px; margin: 0 auto; grid-template-columns: 300px 300px 300px 300px; grid-template-rows: 300px 300px; place-items: center; /* align-content 屬性，控制網格容器垂直對齊方式 */ align-content: space-around; /* justify-content 屬性，控制網格容器水平對齊方式 */ justify-content: space-around; /* place-content 屬性，是 align-content 屬性 和 justify-content 的簡寫形式 若是隻寫一個值，第二個值默認與第一個值相同 */ place-content: space-around; } .item { height: 200px; width: 200px; line-height: 200px; } </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

複製代碼

執行結果以下圖所示：

image-20210509174704749

grid-auto 屬性

1. grid-auto-columns 屬性 和 grid-auto-rows 屬性

該組屬性指定自動生成的網絡軌道(隱式網絡軌道)的大小

隱式網絡軌道在顯示的定位超出指定網格範圍的行或列時被建立。

它們的寫法與grid-template-columns和grid-template-rows相同。若是不指定此屬性，瀏覽器徹底根據單元格內容的大小，決定新增網格的列寬和行高。

2. grid-auto-flow 屬性

該屬性控制自動佈局算法的工做方式。語法結構以下

.container {
  grid-auto-flow: [ row | column ] || dense
}
複製代碼

屬性值：

  • row: 告訴自動佈局算法依次填充每行，根據須要添加新行
  • column: 告訴自動佈局算法依次填充每列，根據須要添加新列
  • dense: 告訴自動佈局算法，若是後面出現較小的網格項,則嘗試在網格中填充空洞

grid 屬性

grid 是一個CSS簡寫屬性，能夠用來設置如下屬性：

顯式網格屬性 grid-template-rows、grid-template-columns 和 grid-template-areas， 隱式網格屬性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow， 間距屬性 grid-column-gap 和 grid-row-gap。

語法結構以下：

.contaienr {
  grid: <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>;
}
複製代碼

該語法不易讀，在實際開發中並推薦使用該語法。

網格項上的屬性

start / end

1. grid-column-start 屬性、grid-column-end 屬性、grid-row-start 屬性、grid-row-end 屬性

網格項的位置能夠經過 grid-column-start 、grid-column-end 、grid-row-start 、grid-row-end 這四個屬性進行肯定。

語法結構以下：

.item {
  /* 左邊框所在的垂直網格線 */
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  /* 右邊框所在的垂直網格線 */
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  /* 上邊框所在的垂直網格線 */
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  /* 下邊框所在的垂直網格線 */
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}
複製代碼

屬性值

  • <number>: 用數字來指代相應編號的網格線。
  • <name>:使用網格線名稱來指代相應命名的網格線。
  • span <number>: 網格項將跨越指定數量的網格軌道
  • span <name>: 網格項將跨越一些軌道，直到碰到指定命名的網格線
  • auto: 自動佈局，或者自動跨越，或者跨越一個默認的軌道

示例代碼以下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>start / end</title>
        <link rel="stylesheet" href="./init.css" />
        <style> .container { background-color: #fffae8; display: grid; width: 920px; height: 820px; margin: 0 auto; grid-template-columns: [c1] 300px [c2] 300px [c3] 300px [c4]; grid-template-rows: [r1] 200px [r2] 200px [r3] 200px [r4]; gap: 10px; } .item { line-height: 200px; height: 200px; } .item1 { /* 1. 純數字寫法 */ grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; /* 2. 純名字寫法 */ grid-column-start: c1; grid-column-end: c3; grid-row-start: r1; grid-row-end: r3; /* 3. 數字 + span 數字 */ grid-column-start: 1; grid-column-end: span 2; grid-row-start: 1; grid-row-end: span 2; /* 4. 數字 + span 名字*/ grid-column-start: 1; grid-column-end: span c3; grid-row-start: 1; grid-row-end: span r3; width: auto; height: auto; } </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

複製代碼

執行結果以下所示：

image-20210509194719268

值得注意的是若是沒有聲明 end 則默認將跨域一個軌道

示例代碼以下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>不聲明 end</title>
        <link rel="stylesheet" href="./init.css" />
        <style> .container { background-color: #fffae8; display: grid; width: 920px; height: 620px; margin: 0 auto; grid-template-columns: [c1] 300px [c2] 300px [c3] 300px [c4]; grid-template-rows: [r1] 200px [r2] 200px [r3] 200px [r4]; gap: 10px; } .item { line-height: 200px; height: 200px; } .item1 { grid-column-start: 2; width: auto; height: auto; } </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

複製代碼

效果圖以下：

image-20210509194917673

網格項若是相互重疊，能夠使用 z-index 來控制它們的堆疊順序

示例代碼以下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>堆疊</title>
        <link rel="stylesheet" href="./init.css" />
        <style> .container { background-color: #fffae8; display: grid; width: 920px; height: 620px; margin: 0 auto; grid-template-columns: [c1] 300px [c2] 300px [c3] 300px [c4]; grid-template-rows: [r1] 200px [r2] 200px [r3] 200px [r4]; gap: 10px; } .item { line-height: 200px; height: 200px; } .item1, .item2 { width: auto; height: auto; } .item1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; /* 經過 z-index 控制堆疊順序 */ z-index: 2; } .item2 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

複製代碼

效果圖以下：

image-20210509195250297

2. grid-column 屬性和 grid-row 屬性

grid-column 屬性是 grid-column-start 、grid-column-end 這兩個屬性的簡寫。

grid-row 屬性是 grid-row-start 、grid-row-end 這兩個屬性的簡寫。

語法結構以下所示：

.item {
  grid-column: grid-column-start / grid-column-end;
  grid-row: grid-row-start / grid-row-end;
}
複製代碼

示例代碼以下所示：

.item1 {
  /* 1. 純數字寫法 */
  grid-column: 1 / 3;
  grid-row: 1 / 3;

  /* 2. 純名字寫法 */
  grid-column: c1 / c3;
  grid-row: r1 / r3;

  /* 3. 數字 + span 數字 */
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;

  /* 4. 數字 + span 名字*/
  grid-column: 1 / span c3;
  grid-row: 1 / span r3;
}
複製代碼

grid-area 屬性

grid-area 屬性用來指定網格項的區域，該屬性能夠理解爲是 grid-column-start 、grid-row-start 、grid-column-end 、grid-row-end 這四個屬性的簡寫。語法結構以下所示：

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end> 
}
複製代碼

屬性值：

  • name: grid-template-areas 中定義的命名。
  • <row-start> / <column-start> / <row-end> / <column-end>: 值爲 <number> | <name> | span <number> | span <name> | auto 其中一種。

示例代碼以下所示：

.item1 {
  /* 第一個 1 表示 grid-row-start: 1 第二個 1 表示 grid-columns-start: 1 第一個 3 表示 grid-row-end: 3 第二個 3 表示 grid-columns-end: 3 */
  grid-area: 1 / 1 / 3 / 3;
}
複製代碼

效果圖以下：

image-20210509194719268

self

1. align-self 屬性

沿着列軸對齊網格項裏面的內容，語法格式以下：

.container {
  align-self: start | end | center | stretch;
}
複製代碼

2. justify-self 屬性

沿着行軸對齊網格項裏面的內容，語法格式以下：

.container {
  justify-self: start | end | center | stretch;
}
複製代碼

2. place-self 屬性

place-self 是一個簡寫屬性，使用此屬性能夠同時設置列軸對齊和行軸對齊，語法結構以下：

.container {
  place-self: start | end | center | stretch;
}
複製代碼

示例代碼以下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>self 屬性</title>
        <link rel="stylesheet" href="./init.css" />
        <style> .container { background-color: #fffae8; display: grid; width: 800px; height: 800px; margin: 0 auto; grid-template-columns: repeat(2, 400px); grid-template-rows: repeat(2, 400px); } .item { /* 全部item都居中 */ place-self: center; } .item1 { /* item1水平靠右 垂直靠上 */ justify-self: end; align-self: start; } .item2 { /* item2水平靠左 垂直靠下 */ justify-self: start; align-self: end; } </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
    </body>
</html>
複製代碼

執行結果以下所示：

image-20210509211320577

(完)

PS: 關於 Grid 佈局有一個小遊戲能夠幫助咱們練習 Grid Garden - 一個用來學CSS grid的遊戲

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程