CSS柵格佈局
阿新 • • 發佈：2020-07-18
CSS柵格佈局
認識柵格佈局
CSS的柵格佈局也被稱為網格佈局(Grid Layout)，它是一種新興的佈局方式。
柵格佈局是一個二維繫統，這意味著它可以同時處理列和行，與彈性佈局相似，柵格系統也是由柵格容器包裹柵格元素進行使用。
對於柵格佈局來說，它的思想實際上非常簡單，將一塊區域繪製成格子，然後將元素填進去即可。
我們學習者應該從下面兩個角度來學習柵格佈局：
1.怎麼樣畫出柵格容器
2.怎麼樣將元素放進柵格容器中的某一區域
值得一提的是，現在的一些舊版瀏覽器對於柵格佈局並沒有較好的支援性，所以這項技術的應用場景其實相比於傳統式的浮動佈局以及彈性佈局來說會少一些。
柵格容器
宣告柵格容器
我們可以使用display:grid;來將一個容器宣告為塊級的柵格容器，它的特點是獨佔一行。
當然，也可以使用display:inline-grid;來將一個容器宣告為內聯塊級容器，雖然沒有獨佔一行但可以設定寬高。
塊級柵格容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body{
padding: 100px;
}
main {
width:300px ;
height: 300px;
border: solid 5px silver;
display: grid;
/* 劃分行列 */
grid-template-rows: repeat(3,100px);
grid-template-columns: repeat(3,100px);
}
section{
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
}
</style>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
<section>9</section>
</main>
上面的是塊級柵格容器，看來是獨佔一行了
</body>
</html>
內聯塊級柵格容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body{
padding: 100px;
}
main {
width:300px ;
height: 300px;
border: solid 5px silver;
display: inline-grid;
/* 劃分行列 */
grid-template-rows: repeat(3,100px);
grid-template-columns: repeat(3,100px);
}
section{
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
}
</style>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
<section>9</section>
</main>
左邊是內聯塊級容器，不會獨佔一行了
</body>
</html>
柵格容器之劃分行列
光有柵格容器沒用，還要為柵格容器劃分行數與列數，並且為它們指定寬度。
grid-template-rows:劃分行數
grid-template-columns:劃分列數
下面就介紹幾種劃分的方式。
固定寬高
如我們想畫一個2行3列的固定寬高的柵格容器，就可以使用下面這種方法來繪製出。
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px 100px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body{
padding: 100px;
}
main {
width: 300px;
border: solid 5px silver;
display: grid;
/* 劃分行列 2行3列 每行代表高度，100px，每列代表寬度，100px */
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px 100px;
}
section{
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
}
</style>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
</main>
</body>
</html>
固定寬高
百分比寬高
除開固定寬高，也可以指定百分比。
如下圖，柵格容器的寬度與高度均為200px，我們來畫出一個2行2列的樣式。
grid-template-rows: 50% 50%;
grid-template-columns: 50% 50%;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body{
padding: 100px;
}
main {
width: 200px;
height: 200px;
border: solid 5px silver;
display: grid;
/* 劃分行列 2行2列 每行代表高度，100px，每列代表寬度，100px */
grid-template-rows: 50% 50%;
grid-template-columns: 50% 50%;
}
section{
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
}
</style>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</main>
</body>
</html>
百分比寬高
重複劃分
可以看到，上面每個塊的區域都是一樣的，那麼有沒有什麼辦法能夠重複繪製呢？使用repeat即可實現。
grid-template-rows: repeat(2, 50%);
grid-template-columns: repeat(2, 50%);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
main {
width: 200px;
height: 200px;
border: solid 5px silver;
display: grid;
/* 重複繪製2次,每行50%高度，重複繪製2次,每列50%寬度， */
grid-template-rows: repeat(2, 50%);
grid-template-columns: repeat(2, 50%);
}
section {
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
}
</style>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</main>
</body>
</html>
重複劃分
我們也可以重複繪製不同寬度的行或者列，比如我們想繪製16個單元格，每個單元格的高度都是100px，但是寬度的話偶數單元格都是50px，奇數單元格是100px，那麼久可以進行如下設定：
grid-template-rows: repeat(2, 100px 100px);
grid-template-columns: repeat(2, 100px 50px);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
main {
border: solid 5px silver;
display: grid;
/*
以列舉例，第一次，繪製一個100px寬度的單元格，在繪製一個50px寬度的單元格，
第二次，以此類推。每次繪製2個。
*/
grid-template-rows: repeat(2, 100px 100px);
grid-template-columns: repeat(2, 100px 50px);
}
section {
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
}
</style>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
<section>9</section>
<section>10</section>
<section>11</section>
<section>12</section>
<section>13</section>
<section>14</section>
<section>15</section>
<section>16</section>
</main>
</body>
</html>
重複劃分
自動劃分
自動劃分是指不指定劃分多少行或者列，而是隻給他一個行列佔比的具體數值，它會自動根據容器的大小來進行劃分。
我們想在一個寬和高都是300px的柵格容器中進行繪製，而每個單元格的寬高都是100px，那就設定一下交給他自動繪製。
grid-template-rows: repeat(auto-fill, 100px);
grid-template-columns: repeat(auto-fill, 100px);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
main {
width: 300px;
height: 300px;
border: solid 5px silver;
display: grid;
grid-template-rows: repeat(auto-fill, 100px);
grid-template-columns: repeat(auto-fill, 100px);
}
section {
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
}
</style>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
<section>9</section>
</main>
</body>
</html>
自動劃分
比例劃分
可以使用 fr 單位設定元素在空間中所佔的比例，它將按照比例來進行劃分。
比如我們設定了一個2行3列的柵格容器，其中的一行高度為的1fr，而第二行為2fr，第一列為40px，而第二列為1fr，第三列為2fr。
grid-template-rows: 1fr 2fr;
grid-template-columns: 40px 1fr 2fr;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
main {
width: 300px;
height: 300px;
border: solid 5px silver;
display: grid;
grid-template-rows: 1fr 2fr;
grid-template-columns: 40px 1fr 2fr;
}
section {
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
}
</style>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
</main>
</body>
</html>
比例劃分
當然，它同樣支援以該單位自動劃分比例。
grid-template 簡寫
grid-template是 grid-template-rows、grid-template-columns、grid-template-areas 的三個屬性的簡寫。
但是目前還沒有學習grid-template-areas ，所以這裡就只用grid-template來宣告 grid-template-rows與grid-template-columns即可。
比如我們來構建一個3行3列單元格寬高均為100px的柵格容器。
/* 行數，列數 */
grid-template: repeat(3,100px)/repeat(3,100px);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
main {
width: 300px;
height: 300px;
border: solid 5px silver;
display: grid;
/* 行數，列數 */
grid-template: repeat(3,100px)/repeat(3,100px);
}
section {
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
}
</style>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
<section>9</section>
</main>
</body>
</html>
簡寫
minmax劃分
使用minmax可以為行線或列線設定一個動態的取值數值，防止元素不會溢位。
如上，每一行的柵格元素單元格總寬度是400px，柵格容器的寬度卻只有300px，造成了列溢位，如果設定minmax則可以讓每個單元格進行適當調整。
/* 行數，列數 */
grid-template: repeat(2,100px)/repeat(4,minmax(50px,100px));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
main {
width: 300px;
/* height: 300px; */
border: solid 5px silver;
display: grid;
/* 行數，列數 */
grid-template: repeat(2,100px)/repeat(4,minmax(50px,100px));
}
section {
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
}
</style>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
</main>
</body>
</html>
minmax劃分
柵格容器之間距定義
行間距
柵格容器中每一個元素，現在看是緊密挨在一起的。我們可以對柵格元素本身進行margin或者padding來將彼此之前撐開留出間隙，也可以使用柵格容器提供的方法。
使用 row-gap 設定行間距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
main {
width: 300px;
/* height: 300px; */
border: solid 5px silver;
display: grid;
/* 行數，列數 */
grid-template: repeat(3,100px)/repeat(3,minmax(50px,100px));
/* 行間距 */
row-gap:30px ;
}
section {
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
}
</style>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
<section>9</section>
</main>
</body>
</html>
行間距
列間距
使用column-gap定義列間距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
main {
width: 300px;
/* height: 300px; */
border: solid 5px silver;
display: grid;
/* 行數，列數 */
grid-template: repeat(3,100px)/repeat(3,minmax(50px,100px));
/* 列間距 */
column-gap:30px ;
}
section {
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
}
</style>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
<section>9</section>
</main>
</body>
</html>
列間距
gap 簡寫
使用 gap 規則可以一次定義行、列間距，如果間距一樣可以只設置一個值。
統一設定行列間距為20px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
main {
width: 300px;
/* height: 300px; */
border: solid 5px silver;
display: grid;
/* 行數，列數 */
grid-template: repeat(3,100px)/repeat(3,minmax(50px,100px));
/* 行列間距 */
gap:30px ;
}
section {
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
}
</style>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
<section>9</section>
</main>
</body>
</html>
行列間距簡寫
柵格容器之柵格線命名
可以發現，其實最少有2條線的資料就可以定位一個柵格元素所在的位置。
如果我們想將元素放入正中間，可以這樣設定：
行線開始位：2號線開始或者1號線結束位置
列線開始位：2號線開始或者1號線結束位置
行線結束位：3號線開始或者2號線結束位置
列線結束位：3號線開始或者2號線結束位置
那麼這樣，我們就可以將元素定位在該容器正中，並且大小隻佔據1個單元格。
獨立命名
我們可以為每一條柵格線都進行獨立命名，現在就來將上面的虛擬碼實現一下。
grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-start c3-start] 100px [c3-end];
每條線可以有多個名字，在使用的時候可以使用其任意的且具有的名字。
當我們需要定位的時候，使用如下格式對一個元素進行定位：
grid-row-start: r2-start;
grid-column-start:c1-end;
grid-row-end: r2-end;
grid-column-end: c3-start;
Ps：預設的柵格容器是不會展示柵格線的，此時需要開啟瀏覽器的檢查功能就會看到柵格線。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
main {
width: 300px;
/* height: 300px; */
border: solid 5px silver;
display: grid;
/* 行數，列數 */
grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-start c3-start] 100px [c3-end];
}
section {
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
grid-row-start: r2-start;
grid-column-start: c1-end;
grid-row-end: r2-end;
grid-column-end: c3-start;
}
</style>
</head>
<body>
<main>
<section>中間</section>
</main>
</body>
</html>
獨立命名
自動命名
對於重複設定的柵格容器系統會為它自動命名，使用時使用 r1、c2 的方式定位柵格。
r代表行
c代表列
重複設定，命名字首：
grid-template-rows: repeat(3, [r-start] 100px [r-end]);
grid-template-columns: repeat(3, [c-start] 100px [c-end]);
在使用自動命名的柵格線進行定位時，應該按照如下格式：
grid-row-start: r-start 2;
grid-column-start: c-start 2;
grid-row-end: r-start 2;
grid-column-end: c-end 2;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
main {
width: 300px;
/* height: 300px; */
border: solid 5px silver;
display: grid;
/* 行數，列數 */
grid-template-rows: repeat(3, [r-start] 100px [r-end]);
grid-template-columns: repeat(3, [c-start] 100px [c-end]);
}
section {
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
grid-row-start: r-start 2;
grid-column-start: c-start 2;
grid-row-end: r-start 2;
grid-column-end: c-end 2;
}
</style>
</head>
<body>
<main>
<section>中間</section>
</main>
</body>
</html>
自動命名
柵格元素之元素定位
我們可以使用以下方法對柵格元素進行定位，但是關於如何定位又分為很多種。
| 選項 | 說明 |
|---|---|
| grid-row-start | 行開始柵格線 |
| grid-row-end | 行結束柵格線 |
| grid-column-start | 列開始柵格線 |
| grid-column-end | 列結束柵格線 |
柵格線位置定位
柵格線位置定位實際上就是數數，在水平的第幾根線，在垂直的第幾根線。
還是老辦法，規定行開始線位置與行結束線位置以及列開始線位置和列結束線位置。
如下，可以看到，單純的就是數數，非常的簡單粗暴。
grid-row-start: 2;
grid-column-start: 2;
grid-row-end: 2;
grid-column-end: 2;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
main {
width: 300px;
/* height: 300px; */
border: solid 5px silver;
display: grid;
/* 行數，列數 */
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
}
section {
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
grid-row-start: 2;
grid-column-start: 2;
grid-row-end: 2;
grid-column-end: 2;
}
</style>
</head>
<body>
<main>
<section>中間</section>
</main>
</body>
</html>
柵格線位置定位
柵格線自定義名稱定位
這個其實上面在說柵格線命名的時候就已經說過了，這裡不再重複。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
main {
width: 300px;
/* height: 300px; */
border: solid 5px silver;
display: grid;
/* 行數，列數 */
grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-start c3-start] 100px [c3-end];
}
section {
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
grid-row-start: r2-start;
grid-column-start: c1-end;
grid-row-end: r2-end;
grid-column-end: c3-start;
}
</style>
</head>
<body>
<main>
<section>中間</section>
</main>
</body>
</html>
柵格線自定義名稱定位
柵格線自動名稱定位
也是在上面介紹過了，不再詳細贅述。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
main {
width: 300px;
/* height: 300px; */
border: solid 5px silver;
display: grid;
/* 行數，列數 */
grid-template-rows: repeat(3, [r-start] 100px [r-end]);
grid-template-columns: repeat(3, [c-start] 100px [c-end]);
}
section {
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
grid-row-start: r-start 2;
grid-column-start: c-start 2;
grid-row-end: r-start 2;
grid-column-end: c-end 2;
}
</style>
</head>
<body>
<main>
<section>中間</section>
</main>
</body>
</html>
柵格線自動名稱定位
偏移量定位
這個其實也比較簡單，我們只需要指定行線的開始位置以及列線的開始位置即可，關於結束為止也是數數，使用span來數，往後走一根線還是兩根線。
grid-row-start: 1;
grid-column-start: 1;
/* 代表從行線開始位置向後數3根線 */
grid-row-end: span 3;
/* 代表從列線開始位置向後數3根線 */
grid-column-end: span 3;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
main {
width: 300px;
/* height: 300px; */
border: solid 5px silver;
display: grid;
/* 行數，列數 */
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
}
section {
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 300px;
color: #fff;
grid-row-start: 1;
grid-column-start: 1;
/* 代表從行線開始位置向後數3根線 */
grid-row-end: span 3;
/* 代表從列線開始位置向後數3根線 */
grid-column-end: span 3;
}
</style>
</head>
<body>
<main>
<section>全佔</section>
</main>
</body>
</html>
偏移量定位
簡寫模式
可以使用 grid-row 設定行開始柵格線，使用 grid-column 設定結束柵格線。
grid-row: 3/span 3;
grid-column: 2/span 3;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
main {
width: 300px;
/* height: 300px; */
border: solid 5px silver;
display: grid;
/* 行數，列數 */
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
}
section {
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
grid-row: 3/span 3;
grid-column: 2/span 3;
}
</style>
</head>
<body>
<main>
<section>右下角兩格</section>
</main>
</body>
</html>
簡寫模式
grid-area 極簡模式
grid-area是對上面的簡寫模式grid-row以及grid-column的再次簡寫，它的語法結構如下：
行線開始/列線開始/行線結束/列線結束
grid-area: 2/1/span 1/span 3;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
main {
width: 300px;
/* height: 300px; */
border: solid 5px silver;
display: grid;
/* 行數，列數 */
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
}
section {
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: dashed 1px black;
text-align: center;
line-height: 78px;
color: #fff;
grid-area: 2/1/span 1/span 3;
}
</style>
</head>
<body>
<main>
<section>中間三格</section>
</main>
</body>
</html>
極簡模式
bootstrap柵格系統原理
bootstrap中的柵格系統將整個柵格容器分為了12個塊，其實它的原理非常簡單。
我們用目前所學的知識也能開發類似的元件，如下圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding: 100px;
}
.row {
padding: 10px;
width: 600px;
border: solid 5px silver;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 10px 10px;
}
.col-1 {
grid-column-end: span 1;
}
.col-2 {
grid-column-end: span 2;
}
.col-3 {
grid-column-end: span 3;
}
.col-4 {
grid-column-end: span 4;
}
.col-5 {
grid-column-end: span 5;
}
.col-6 {
grid-column-end: span 6;
}
.col-7 {
grid-column-end: span 7;
}
.col-8 {
grid-column-end: span 8;
}
.col-9 {
grid-column-end: span 9;
}
.col-10 {
grid-column-end: span 10;
}
.col-11 {
grid-column-end: span 11;
}
.col-12 {
grid-column-end: span 12;
}
[class^="col-"] {
background-color: blueviolet;
background-clip: content-box;
height: 30px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<main>
<div class="row">
<section class="col-8">col-8</section>
<section class="col-4">col-4</section>
<section class="col-4">col-4</section>
<section class="col-4">col-4</section>
<section class="col-4">col-4</section>
<section class="col-6">col-6</section>
<section class="col-6">col-6</section>
</div>
</main>
</body>
</html>
bootstrap柵格系統原理
柵格容器之柵格區域
柵格區域說白了就是一堆柵格的單元格組成的區域，一個單元格也是一個區域。我們可以使用柵格區域更方便的放置元素而不用再慢慢的數線放置，柵格區域放置元素通常用在大布局上。
使用 grid-template-areas宣告柵格區域時需要注意一點，柵格區域放置元素必須是矩形的。
你不能這樣放置這樣的一個元素：
柵格區域命名
來看一個簡單的案例，如何使用 grid-template-areas對柵格區域進行命名並填充元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>