设置display为grid或inline-grid可创建网格容器，其直接子元素成为网格项；通过grid-template-columns和grid-template-rows定义行列结构，repeat()函数简化重复代码，gap属性设置间距，注意仅直接子元素参与布局。
要使用 display: grid 创建网格容器，只需要将 CSS 的 display 属性设置为 grid 或 inline-grid，元素就会变成一个网格容器，其直接子元素会自动成为网格项。下面详细介绍如何操作和常用配置。
1. 创建基本网格容器
给一个父元素设置 display: grid，它就变成了一个块级网格容器。
.container {
display: grid;
}
如果希望它是行内级容器（类似 inline-block），可以使用：
.container {
display: inline-grid;
}
2. 定义行和列
通过 grid-template-columns 和 grid-template-rows 可以定义网格的列宽和行高。
立即学习“前端免费学习笔记（深入）”；
例如，创建一个三列、每列宽度相等的网格：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
或者创建两行，高度分别为 100px 和 50px：
Destoon B2B网站
下载
Destoon B2B网站管理系统是一套完善的B2B(电子商务)行业门户解决方案。系统基于PHP+MySQL开发，采用B/S架构，模板与程序分离，源码开放。模型化的开发思路，可扩展或删除任何功能；创新的缓存技术与数据库设计，可负载千万级别数据容量及访问。 系统特性1、跨平台。支持Linux/Unix/Windows服务器，支持Apache/IIS/Zeus等2、跨浏览器。基于最新Web标准构建，在
.container {
display: grid;
grid-template-rows: 100px 50px;
}
3. 使用 repeat() 简化写法
当列或行重复时，可以用 repeat() 函数简化代码。
比如创建 4 列，每列占 1fr：
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
4. 添加间距（gap）
使用 gap 属性设置网格项之间的间距。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
也可以分别设置行和列的间距：
gap: 10px 20px; /* 行间距 10px，列间距 20px */
基本上就这些。只要设置 display: grid，再定义行列结构和间距，就能快速构建灵活的布局。不复杂但容易忽略细节，比如子元素必须是直接后代才会参与网格布局。
