之前我們講過flex布局在實際項目中開發，今天我們來看看另一個新布局grid——網格布局
用過UI框架的童鞋一定對網格布局不陌生，大部分UI框架里都有。element layout布局、ant design grid布局
本次介紹只會介紹一些常用屬性
容器屬性
- grid布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
display: grid;
}
</style>
</head>
<body>
<div class="container">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</body>
</html>
打開chrome調試我們看到
也可以變成行內 display:inline-grid
- grid-template-columns && grid-template-rows
1.grid-template-columns定義列屬性
.container{
display: grid;
grid-template-columns: 100px 100px 100px;
}
2.grid-template-rows定義行屬性
.container{
display: grid;
grid-template-rows: 100px 100px 100px;
}
grid-template-columns && grid-template-rows相關其他屬性
(1).寬度高度可以使用百分比
.container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
(2).repeat()
使用repeat()可以少些重復的寬高
例如：
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
重復的值可以是多個數值
grid-template-columns: repeat(2, 100px 20px 80px);
將多個元素看成一個整體
(3).fr 關鍵字
類似于vw、vh 1vw為寬度的1% 1r可以看做是50%
- grid-gap
grid-gap為網格之間的寬度
grid-gap屬性是grid-column-gap和grid-row-gap的合并簡寫形式
grid-gap: <grid-row-gap> <grid-column-gap>;
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 20px 20px;
}
- grid-template-areas 可以通過自命名來規定每行塊
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
}
上面的寫法grid-template-areas里的內容名稱可隨便定義，可以相同，每行不限于個數
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a a a a'
'd d d d'
'g g g g';
}
需要注意的是grid-template-columns和grid-template-rows定義時個數如果大于grid-template-areas定義每列的個數，會顯示grid-template-columns定義的個數
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a a'
'd d'
'g g';
}
- grid-auto-flow
排列的順序，默認row先行再列，column先列后行
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a a a'
'd d d'
'g g g';
grid-auto-flow: column;
}
place-items
place-items為justify-items和align-items縮寫
對齊方式
1.justify-items 一個內元素水平位置
2.align-items 一個內元素垂直位置place-content
place-items為justify-content和align-content縮寫
- justify-content grid塊在容器的水平位置
- justify-content grid塊在容器的垂直位置
內部屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
display: grid;
}
.item{
}
</style>
</head>
<body>
<div class="container">
<span class="item">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</body>
</html>
- item定在網格哪個網格
grid-column-start屬性：左邊框所在的垂直網格線
grid-column-end屬性：右邊框所在的垂直網格線
grid-row-start屬性：上邊框所在的水平網格線
grid-row-end屬性：下邊框所在的水平網格線
.item {
grid-column-start: 2;
grid-column-end: 4;
}
span關鍵詞 表示占幾個網格
.item {
grid-column-start: span 2;
}
- grid-area
放在哪個區域（非常好用）
.container {
display: grid;
grid-template-areas: 'a b c'
'd e f'
'g h i'
}
.item{
grid-area: e
}
把item-1放在了areas定義e的位置
- place-self
place-self是align-self屬性和justify-self屬性的縮寫
- justify-self 單格內容水平位置
- align-self 單格內容垂直位置
.container {
display: grid;
grid-template-areas: 'a b c'
'd e f'
'g h i'
}
.item{
grid-area: e;
place-self: center center;
}
一些常用的屬性，大致學習了一遍，項目中使用更多的還是看文檔比較全面
CSS Grid 網格布局教程 —— 阮一峰
