使用CSS Grid可直观创建多行多列布局。通过display: grid开启布局，用grid-template-columns和grid-template-rows定义行列结构，支持固定值、fr单位及repeat()函数简化重复设置，如repeat(3, 1fr)表示三等分列宽；结合minmax(200px, 1fr)与auto-fit实现响应式自适应列数，gap属性设置单元格间距。子元素自动填入网格无需额外定位，掌握核心属性即可快速构建灵活布局。
使用 CSS Grid 实现多行多列的网格布局非常直观且强大。只需要在容器上启用 grid 布局，并定义行列结构即可。
要开启网格布局，需将父容器的 display 属性设为 grid 或 inline-grid。
grid 适用于块级容器，inline-grid 则让容器表现为内联元素。
.container {
display: grid;
}通过 grid-template-columns 和 grid-template-rows 可以明确指定每列和每行的尺寸。
示例：创建一个 3 列 2 行的等宽网格
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三列均分空间 */
grid-template-rows: 100px 200px; /* 第一行高 100px，第二行 200px */
gap: 10px; /* 单元格之间的间距 */
}当列或行数量较多且样式重复时，可用 repeat() 函数简化代码。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 等同于 1fr 1fr 1fr */
grid-template-rows: repeat(2, 100px); /* 两行各 100px */
gap: 15px;
}还可以混合使用不同单位：
grid-template-columns: 100px repeat(2, 1fr); /* 第一列 100px，后两列均分剩余空间 */
对于响应式设计，可结合 minmax() 与 auto-fit 或 auto-fill 实现自适应列数。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}这段代码表示：每列最小 200px，最大为 1fr，浏览器会根据容器宽度自动安排列数，适合移动端到桌面端的响应布局。
基本上就这些。只要掌握 display: grid、grid-template-columns/rows 和 gap，就能快速构建灵活的多行多列布局。不复杂但容易忽略细节，比如子元素会自动填入网格单元，无需额外定位。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
284
收藏
