1. 创建grid网格布局
含义：由纵横相交的两组网格线形成的框架性布局结构。
语法： display：grid;
在声明了一个 grid 容器之后，我们会发现，项目全部具备了块级元素的特征，默认一行一行显示；我们把项目在容器中的这种现象 叫做 排列方式， 默认是先行后列。
grid 布局有很多的参数，整理了一下，推荐写法及注释：
- grid-auto-flow: row;
通过该属性就可以设置项目在容器中的排列方式， 默认是 先行先列。
- grid-auto-flow: column;
设置项目在容器中的排列方式是列优先。
- ****grid-template-rows: 100px 100px;
在容器中显示的划分行和列，生成指定数量的单元格来放置项目；设置2行，且两行的行高都是100px。
- grid-template-columns: 100px 100px 100px;
设置3列，且每列的宽度都是100px。
当然；grid 网格布局也离不开显/隐网格；
- 显示网格：项目按照既定的网格来分配空间。
- 隐式网格： 由系统计算剩余的宽度或者高度，并且全部给到新的项目；并且由容器根据项目数量自动生成。
语法： grid-auto-rows: auto;
<style>
.container {
width: 400px;
height: 400px;
background-color: wheat;
display: grid;
grid-auto-flow: row;
grid-auto-flow: column;
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-auto-rows: auto;
grid-auto-columns: 150px;
}
.item {
background-color: skyblue;
font-size: 2rem;
}
</style>
</head>
<body>
<!-- 1. 创建网格容器 注意：容器一定是项目的直接父元素 -->
<div class="container">
<!-- 2. 创建项目 -->
<span class="item item1">1</span>
<span class="item item2">2</span>
<span class="item item3">3</span>
<span class="item item4">4</span>
<span class="item item5">5</span>
<span class="item item6">6</span>
<span class="item item7">7</span>
</div>
</body>
2. 设置单元格的数量和尺寸
2.1 设置网格线的方式
- 固定值： 能够直观的把控每一个格子的大小,如果格子不够,会由系统自动分配。
<!-- 三行三列，行高都为100 -->
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
- 百分比：auto: 由浏览器自动计算。
<!-- 第一行占容器的高度的20%，第二行30%，第三行自动计算 -->
grid-template-rows: 20% 30% auto;
<!-- 第一列100px 最后一列100px 中间列自动计算 -->
grid-template-columns: 100px auto 100px;
- 按比列来： fr
<!-- 总宽与高除以 fr 前面的数字就是所占的份额 -->
grid-template-rows: 1fr 2fr 1fr;
grid-template-columns: 1fr 100px 1fr;
- 重复设置： repeat(n,value) => n 为重复的次数，value 为宽与高的值
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
- 弹性设置： minmax(min,max) 如果容器过大,会按照最大值取,反之取最小值。
<!-- 先按照最小值50px来设置,发现容器还未溢出,所以继续增加尺寸到max100px,发现还是没有溢出,则取最大值100px -->
grid-template-rows: repeat(3, minmax(50px,100px));
<!-- 先按照最小值150px来设置,发现容器已经溢出,所以就按照150px来设置,不会再往后看了 -->
grid-template-columns: repeat(3, minmax(150px, 1fr));
- 自动填充： auto-fill 自动填充 表示让一行或者一列尽可能多的容纳更多的单元格。当我们只需要确定列宽或者行高,而不用考虑有多少列或行的时候,就可以用它。
width: auto;
grid-template-columns: repeat(auto-fill, 100px);
2.2 设置网格线的起始编号
比如：从第一根x轴开始,从第一根y轴线开始,到第二根x轴结束,到第5根y轴线结束。
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 2;
grid-column-end: 5;
- 简写方式：
<!-- 第4行行号开始,第5行行号结束 -->
grid-row: 4 / 5;
<!-- 第1列列号开始,第5列列号结束 -->
grid-column: 1 / 5;
- 使用偏移量来简写：这就得使用一个关键字 ：span 代表要跨域几个单元格
grid-row: 4 / span;
grid-column: 1 / span 4;
- 如果从当前位置进行填充,可以省略当前得行/列编号。
grid-row: span;
grid-column: span 4;
3. 使用命名网格线划分单元格
网格线名字：使用方括号指定每一根网格的名字
中括号中的名字是自定义名字, 由于会出现两个单元格会共用一根线的情况,我们可以将被共用的网格线起两个名字
书写方式：
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-end c3-start] 100px [c3-end];
4. 将项目填充到默认网格区域中
我们以一个例子来说明
需求：让item1填充满第一行的4个单元格
HTML部分
<body>
<div class="container">
<span class="item item1">1</span>
<span class="item item2">2</span>
<span class="item item3">3</span>
</div>
</body>
CSS部分
<style>
.container {
width: 400px;
height: 400px;
background-color: wheat;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4,1fr);
}
.item {
background-color: skyblue;
font-size: 2rem;
}
.item1 {
background-color: rgb(229, 236, 130);
/* 起始行号 / 起始列号 / 结束行号 / 结束列号 */
grid-area: 1 / 1 / 2 / 5;
/* 简化写法 */
grid-area: span 1 / span 4;
}
.item2 {
background-color: yellowgreen;
grid-area: span 2 / span 2;
}
.item3 {
background-color: rgb(233, 162, 174);
grid-area: span 2 / span 2;
}
</style>
5. 将项目填充到命名网格区域中
需求：将9个网格进行命名,后面分配给每个item；命名亦可自定义
注意： 中间不加符号。
HTML部分：
<body>
<div class="container">
<span class="item item1">1</span>
<span class="item item2">2</span>
<span class="item item3">3</span>
<span class="item item4">4</span>
<span class="item item5">5</span>
</div>
</body>
css部分：
<style>
.container {
width: 400px;
height: 400px;
background-color: wheat;
display: grid;
grid-template-rows: 80px 1fr 80px;
grid-template-columns: 40px 1fr 40px;
grid-template-areas:
'header header header'
'left center right'
'footer footer footer'
;
}
.item {
background-color: skyblue;
font-size: 2rem;
}
.item1 {
background-color: rgb(229, 236, 130);
grid-area: header;
}
.item2 {
background-color: yellowgreen;
grid-area: left;
}
.item3 {
background-color: rgb(233, 162, 174);
grid-area: center;
}
.item4 {
background-color: rgb(140, 165, 240);
grid-area: right;
}
.item5 {
background-color: rgb(226, 60, 179);
grid-area: footer;
}
</style>
6. 设置整个项目在容器中的对齐方式
- 设置项目在容器中的水平对齐方式
<!-- 可用参数：left center right space-around space-evenly -->
justify-content: space-evenly;
- 设置项目在容器中的垂直对齐方式
<!-- 可用参数：start end center space-around space-between space-evenly -->
align-content: start;
- 为了和flex区分开,我们通常设置简写属性
方式：参数1: 垂直方向 参数2: 水平方向
place-content: end center;
- 垂直和水平相等时,可以只写一个值
place-content: center;
7. 设置项目在单元格中的对齐方式
- 控制单个项目在单元格中的水平方向
<!-- 可用参数： start(默认) center end -->
justify-items: end;
- 控制单个项目在单元格中的垂直方向
<!-- 可用参数： start(默认) center end -->
align-items: end;
- 复合属性 ：先垂直 再水平
place-items: end start;
place-items: center;
place-items: center end;
- 设置某一个项目在单元格中的对齐方式 : self
justify-self: end;
align-self: start;
- 简写方式: 先垂直再水平
place-self: center start;
8. 设置容器中行与列之间的间距
此时要用到一个新的关键属性： gap： 行间距 列间距。 在2022年以前还是用的 grid-gap 但是之后就弃用了，取而代之的就是 gap 这个属性，不过两者的用法是等价。
用法：直接设置宽高的尺寸
gap: 20px 10px;
gap: 20px;
效果展示：
