內(nèi)容導(dǎo)讀
- 定義網(wǎng)格容器
- 顯式網(wǎng)格屬性
- 隱式網(wǎng)格屬性
- 網(wǎng)格對(duì)齊方式
- 設(shè)置網(wǎng)格間距
- 設(shè)置跨行跨列
什么是網(wǎng)格布局？
網(wǎng)格布局是一種二維布局系統(tǒng)
網(wǎng)格布局中會(huì)見(jiàn)到的單詞
- grid：網(wǎng)格 、柵格
- row:行
- column：列
- template：模板
- justify：調(diào)整
- content：內(nèi)容
- item：項(xiàng)目
- container：容器
- self：自己
- fraction：片段
- area：地區(qū)、區(qū)域
- areas：多個(gè)區(qū)域；（s表示復(fù)數(shù)）
網(wǎng)格布局系統(tǒng)術(shù)語(yǔ)
grid container:網(wǎng)格容器
grid item：網(wǎng)格項(xiàng)目
grid line：網(wǎng)格線
grid默認(rèn)的狀態(tài)inline方向是justify-items: stretch
行：row（水平）
列：columns（垂直）
巧記行列單詞：行少列多
示例
<!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>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: blueviolet;
}
.container {
width: 960px;
min-height: 500px;
margin: 50px auto;
background-color: white;
/* 1.定義網(wǎng)格容器 */
display: grid;
/* 2.簡(jiǎn)寫(xiě)屬性。定義顯式網(wǎng)格(網(wǎng)格列，網(wǎng)格行，網(wǎng)格區(qū)域) */
/* grid-template: 100px 100px / 100px 100px 100px; */
/* 2. 定義顯式網(wǎng)格列(列數(shù)和列寬)*/
grid-template-columns: 100px 100px 100px;
/* grid-template-columns: repeat(3,1fr); */
/* 2.定義顯式網(wǎng)格行(行數(shù)和行高) */
grid-template-rows: 100px 100px;
/* 2.定義網(wǎng)格模版區(qū)域 */
grid-template-areas:
'header header header'
'main main main'
'footer footer footer';
/* 3.定義隱式網(wǎng)格行的行高*/
grid-auto-rows: auto;
/* 3.定義隱式網(wǎng)格列寬 */
grid-auto-columns: 200px;
/* 4.定義網(wǎng)格沿行軸的對(duì)齊方式 */
justify-content: end;
/* 4.定義網(wǎng)格沿列軸的對(duì)齊方式 */
align-content: end;
/* 4.定義網(wǎng)格單元沿列軸的對(duì)齊方式 */
align-items: center;
/* 4.定義網(wǎng)格單元沿行軸的對(duì)齊方式 */
justify-items: center;
/******************** 第五組：設(shè)置網(wǎng)格間距 *********************/
/* 5.定義列間距 */
column-gap: 10px;
/* 5.定義行間距 */
row-gap: 10px;
/* 5.簡(jiǎn)寫(xiě)屬性：定義網(wǎng)格間距 */
gap: 10px;
}
.item {
border: 1px solid black;
background-color: aqua;
}
.item2 {
/* 4.覆蓋align-items */
align-self: end;
/* 4.覆蓋justify-items */
justify-self: stretch;
}
.item1 {
background-color: blue;
/* 第六組：設(shè)置跨行跨列 */
/* 6.定義跨列起始線 */
grid-column-start: 1;
/* 6.定義跨列結(jié)束線 */
grid-column-end: 3;
/* 跨列復(fù)合屬性 */
grid-column: 1 / 3;
/* 6.定義跨行起始線 */
grid-row-start: 2;
/* 6.定義跨行結(jié)束線 */
grid-row-end: 4;
/* 6.跨行復(fù)合屬性 */
grid-row: 2 / 4;
/* 6.定義網(wǎng)格區(qū)域。
可以通過(guò)網(wǎng)格線設(shè)置網(wǎng)格區(qū)域，也可以也可以通過(guò)自定義名稱(chēng)設(shè)置網(wǎng)格區(qū)域。
是grid-column和grid-row的簡(jiǎn)寫(xiě)屬性 */
grid-area: header;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
<div class="item item4">item4</div>
<div class="item item5">item5</div>
<div class="item item6">item6</div>
<div class="item item7">item7</div>
<div class="item item8">item8</div>
<div class="item item9">item9</div>
</div>
</body>
</html>
ps：下期見(jiàn)~
