用 repeat(3, 1fr) 一行定义三行三列等分九宫格，gap 统一控制间距，place-items: center 一键居中内容，grid-column/row 精准定位元素。
用 repeat() 和 fr 单行就能写出标准九宫格，根本不用手动写 9 个 grid-template-rows/columns。
九宫格本质是 3×3 等分网格，CSS Grid 天然支持重复模式：
grid-template-columns: repeat(3, 1fr); —— 三列均分容器宽度grid-template-rows: repeat(3, 1fr); —— 三行均分容器高度不用给每个项目单独设 margin，统一用 gap：
gap: 12px; 同时作用于行距和列距row-gap: 8px; column-gap: 16px;
让每个格子内的文字、图标自动居中，无需额外类名或 flex：
立即学习“前端免费学习笔记（深入）”；
place-items: center; —— 同时设置 justify-items 和 align-items
justify-items: center;
display: grid; + place-content: center;
默认所有子元素按顺序填入 1–9 号网格区域，但可以手动指定位置：
grid-column: 2 / 4; grid-row: 2 / 4;
grid-column: 1 / -1; grid-row: 1;（-1 表示最后一根线）以上就是css九宫格布局写起来太麻烦怎么办_使用repeat和fr快速搭建结构的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
664
收藏
取消收藏
