用CSS Grid实现九宫格只需设置display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);，配合gap、justify-items和align-items可轻松实现等分、间隙与内容居中，子项设aspect-ratio: 1可确保正方形。

用 CSS Grid 实现九宫格非常简单，核心就是 grid-template-columns 和 grid-template-rows 配合 repeat() 与 fr 单位。

用 repeat(3, 1fr) 一次性定义三行三列

九宫格本质是 3×3 的等分网格。直接写：

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);

这样就创建了 3 列等宽、3 行等高的网格容器，9 个子元素会自动按源顺序填满格子（从左到右、从上到下）。

保证每个格子是正方形（可选但常用）

如果希望九宫格每个单元是正方形（比如头像墙、图标菜单），可以结合 aspect-ratio: 1 或利用 padding-bottom 技巧，更推荐现代写法：

• 给每个子项设置 aspect-ratio: 1，并设 width: 100%，它会自动保持正方形
• 或者统一控制容器：用 grid-auto-rows: 1fr + 子项 height: 0; padding-bottom: 33.33%（需配合 position: relative 和绝对定位内容）

加间隙用 gap，别用 margin

想让格子之间有空隙，直接用 gap: 8px（同时作用于行和列），简洁又可靠：

• gap: 8px 等价于 row-gap: 8px; column-gap: 8px
• 避免对子元素设 margin，容易破坏对齐，也增加计算复杂度

内容居中对齐更顺手

让每个格子里的内容（比如图标+文字）居中显示，只需两行：

justify-items: center; /* 水平居中 */
align-items: center;   /* 垂直居中 */

这两个属性作用于整个网格容器，所有子项都会自动居中，无需单独设置每个子项。

# css  # 垂直居中  # 绝对定位  # grid布局  # auto  # display  # position  # margin  # padding  # column  # 九宫格  # 只需  # 作用于  # 这两个  # 可选  # 想让  # 它会  # 又可  # 两行  # 等高 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel怎么定时执行任务_Laravel任务调度器Schedule配置与Cron设置【教程】  html5怎么画眼睛_HT5用Canvas或SVG画眼球瞳孔加JS控制动态【绘制】  WEB开发之注册页面验证码倒计时代码的实现  Win11任务栏卡死怎么办 Windows11任务栏无反应解决方法【教程】  微信小程序 配置文件详细介绍  Laravel如何安装使用Debugbar工具栏_Laravel性能调试与SQL监控插件【步骤】  HTML透明颜色代码怎么让下拉菜单透明_下拉菜单透明背景指南【技巧】  使用C语言编写圣诞表白程序  简单实现Android验证码  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  JS中页面与页面之间超链接跳转中文乱码问题的解决办法  C语言设计一个闪闪的圣诞树  php打包exe后无法访问网络共享_共享权限设置方法【教程】  JavaScript常见的五种数组去重的方式  python中快速进行多个字符替换的方法小结  高端建站三要素：定制模板、企业官网与响应式设计优化  Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践  高配服务器限时抢购：企业级配置与回收服务一站式优惠方案  JavaScript如何实现音频处理_Web Audio API如何工作？  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  Laravel如何自定义分页视图？（Pagination示例）  奇安信“盘古石”团队突破 iOS 26.1 提权  如何确认建站备案号应放置的具体位置？  Laravel如何实现多表关联模型定义_Laravel多对多关系及中间表数据存取【方法】  Laravel如何实现用户密码重置功能？（完整流程代码）  简历在线制作网站免费版,如何创建个人简历？  装修招标网站设计制作流程,装修招标流程？  如何挑选最适合建站的高性能VPS主机？  javascript中数组（Array)对象和字符串（String)对象的常用方法总结  Laravel怎么返回JSON格式数据_Laravel API资源Response响应格式化【技巧】  如何打造高效商业网站？建站目的决定转化率  DeepSeek是免费使用的吗 DeepSeek收费模式与Pro版本功能详解  谷歌浏览器如何更改浏览器主题 Google Chrome主题设置教程  如何用VPS主机快速搭建个人网站？  免费网站制作appp,免费制作app哪个平台好？  Laravel中Service Container是做什么的_Laravel服务容器与依赖注入核心概念解析  Android okhttputils现在进度显示实例代码  Bootstrap整体框架之JavaScript插件架构  Laravel怎么使用artisan命令缓存配置和视图  PHP 500报错的快速解决方法  JavaScript如何实现路由_前端路由原理是什么  Google浏览器为什么这么卡 Google浏览器提速优化设置步骤【方法】  如何挑选高效建站主机与优质域名？  香港服务器选型指南：免备案配置与高效建站方案解析  小米17系列还有一款新机？主打6.9英寸大直屏和旗舰级影像  高防服务器租用指南：配置选择与快速部署攻略  在centOS 7安装mysql 5.7的详细教程  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  想要更高端的建设网站，这些原则一定要坚持！  php8.4header发送头信息失败怎么办_php8.4header函数问题解决【解答】