Grid网格布局是一个二维的基于网格布局，它将网页划成一个个网格，可以任意组合成不同的网格。
    采用Grid的元素，被称为Grid容器，简称为容器
    网格容器中的子元素，称为网格项
    组成网格线的分界线，称为列网格线和横网格线
    两个相邻的列网格线和两个相邻的行网格线组成的区域，称为网络单元格

网格布局语法，在父级元素设置display的属性值是grid

html代码示例

<div class="container">
	 	<div class="item">01</div>
	 	<div class="item">02</div>
	 	<div class="item">03</div>
	 	<div class="item">04</div>
	 	<div class="item">05</div>
	 	<div class="item">06</div>
	 	<div class="item">07</div>
	 	<div class="item">08</div>
	 	<div class="item">09</div>
	 </div>

css代码示例

.container {
			width: 800px;
			height:500px;
			border: 1px solid #ccc;
}
.container>div {
			border:1px solid red;
		}

如果想要添加网格效果

.container {
			width: 800px;
			height:500px;
			border: 1px solid #ccc;

			display: grid;
}

grid这里介绍一下几个属性

grid-template-columns属性，设置网格列宽

固定值或百分比

• 固定长度：如 100px、5em，直接指定列宽。
• 百分比：如 50%，基于网格容器的宽度计算。
• auto：列宽由内容自动调整，或填充剩余空间。

弹性单位（fr）

• fr 单位：如 1fr 2fr，表示按比例分配剩余空间（第一列占 1 份，第二列占 2 份）。

函数

• minmax(min, max)：定义列宽范围，如 minmax(100px, 1fr) 表示列宽不小于 100px，不大于 1fr。
• repeat(n, value)：重复模式，如 repeat(3, 1fr) 表示 3 列等宽。

命名网格线

• 命名线：如 [start] 1fr [end]，为网格线赋予名称（start 和 end），便于后续定位。

关键字

• none：默认值，不显式定义列，由 grid-auto-columns 控制。
• subgrid（实验性）：继承父网格的列轨道（需浏览器支持）。

grid-template-rows属性，设置网格行高，属性值与设置列宽的一样

grid-column-gap:设置网格之间列间距

grid-row-gap:设置行间距