用 grid-template-columns: repeat(3, 1fr) 可快速实现三行三列等宽九宫格；需配合 grid-auto-rows: 1fr 或 aspect-ratio: 1 实现等高或正方形格子，再通过 gap 设置间距、媒体查询适配小屏。
用 grid-template-columns: repeat(3, 1fr) 就能快速实现标准九宫格布局——三行三列、等宽等高、自动填充内容。
只需设置容器为 grid，并定义三列等分，Grid 会自动按内容顺序逐行填满：
display: grid
grid-template-columns: repeat(3, 1fr) 创建三列弹性列grid-auto-rows: auto，建议显式设为 1fr 或固定值（如 100px）保证行高一致九宫格常要求“方格”，仅靠 1fr 不控制高度。推荐用 aspect-ratio: 1：
aspect-ratio: 1，浏览器自动保持宽高相等width: 100% 和 height: 100%（或 grid-area 占满）效果更稳aspect-ratio？可用 padding-top: 100% + position: relative/absolute 模拟手机上三列太挤，用媒体查询动态调整列数：
@media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }@media (max-width: 480px) { grid-template-columns: 1fr; }repeat(auto-fit, minmax(200px, 1fr))) 替代固定 3 列，更灵活格子之间留白、整体居中，影响观感：
gap: 12px 统一行列间距（替代老式 margin 负技巧）justify-items: center 让所有子项水平居中（若子项宽度不足）align-items: stretch（默认）确保等高基本上就这些 —— 三列靠 repeat(3, 1fr)，方格靠 aspect-ratio，响应靠媒体查询或 auto-fit，间隙靠 gap。不复杂但容易忽略细节。
以上就是Grid网格布局如何实现类似九宫格效果_使用repeat(3,1fr)快速创建三列网格的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
731
