内容导读
- 定义网格容器
- 显式网格属性
- 隐式网格属性
- 网格对齐方式
- 设置网格间距
- 设置跨行跨列
什么是网格布局？
网格布局是一种二维布局系统
网格布局中会见到的单词
- grid：网格 、栅格
- row:行
- column：列
- template：模板
- justify：调整
- content：内容
- item：项目
- container：容器
- self：自己
- fraction：片段
- area：地区、区域
- areas：多个区域；（s表示复数）
网格布局系统术语
grid container:网格容器
grid item：网格项目
grid line：网格线
grid默认的状态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.定义网格容器 */
display: grid;
/* 2.简写属性。定义显式网格(网格列，网格行，网格区域) */
/* grid-template: 100px 100px / 100px 100px 100px; */
/* 2. 定义显式网格列(列数和列宽)*/
grid-template-columns: 100px 100px 100px;
/* grid-template-columns: repeat(3,1fr); */
/* 2.定义显式网格行(行数和行高) */
grid-template-rows: 100px 100px;
/* 2.定义网格模版区域 */
grid-template-areas:
'header header header'
'main main main'
'footer footer footer';
/* 3.定义隐式网格行的行高*/
grid-auto-rows: auto;
/* 3.定义隐式网格列宽 */
grid-auto-columns: 200px;
/* 4.定义网格沿行轴的对齐方式 */
justify-content: end;
/* 4.定义网格沿列轴的对齐方式 */
align-content: end;
/* 4.定义网格单元沿列轴的对齐方式 */
align-items: center;
/* 4.定义网格单元沿行轴的对齐方式 */
justify-items: center;
/******************** 第五组：设置网格间距 *********************/
/* 5.定义列间距 */
column-gap: 10px;
/* 5.定义行间距 */
row-gap: 10px;
/* 5.简写属性：定义网格间距 */
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;
/* 第六组：设置跨行跨列 */
/* 6.定义跨列起始线 */
grid-column-start: 1;
/* 6.定义跨列结束线 */
grid-column-end: 3;
/* 跨列复合属性 */
grid-column: 1 / 3;
/* 6.定义跨行起始线 */
grid-row-start: 2;
/* 6.定义跨行结束线 */
grid-row-end: 4;
/* 6.跨行复合属性 */
grid-row: 2 / 4;
/* 6.定义网格区域。
可以通过网格线设置网格区域，也可以也可以通过自定义名称设置网格区域。
是grid-column和grid-row的简写属性 */
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：下期见~
