CSS如何快速实现九宫格排版_通过repeat(3, 1fr)构建正方形网格-css教程-PHP中文网

能，但需配合子项宽高设为100%及aspect-ratio:1才能实现正方形九宫格；仅grid-template-columns:repeat(3,1fr)仅保证三列等宽，行高由内容决定，无法确保方格。

css如何快速实现九宫格排版_通过repeat(3, 1fr)构建正方形网格

用 `grid-template-columns: repeat(3, 1fr)` 能不能直接得到九宫格？

能，但只是“三列等宽”，不是“正方形格子”。repeat(3, 1fr) 只控制列宽，行高默认由内容撑开——如果图片或文字高度不一致，网格就歪了。真正要的是每格宽高相等，且整体自适应。

为什么加了 `aspect-ratio: 1` 还是不方？

因为 aspect-ratio 作用在子元素上，而 Grid 容器本身不自动约束子项尺寸。常见错误是只给容器设 display: grid 和列定义，却没管子项的尺寸行为：

子项默认不拉伸填满网格区域（align-items/justify-items 默认是 stretch，但若子项有固有宽高或 max-width，会干扰）
aspect-ratio: 1 在子项上生效的前提是它没有被其他尺寸声明覆盖（比如写了 width: 100px 或 height: auto）
部分老浏览器不支持 aspect-ratio（如 Safari ≤ 15.4），需备选方案

稳妥实现正方形九宫格的最小代码

核心是两层控制：容器定义 3×3 网格结构，子项强制正方形并填满区域。推荐写法：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px; /* 可选，控制间距 */
}
<p>.grid > <em> {
aspect-ratio: 1;
width: 100%;
height: 100%;
object-fit: cover; /</em> 若是 img 标签，防止变形 */
}</p>

注意点：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须给子项加 width: 100% 和 height: 100%，否则 aspect-ratio 无参照基准
若子项是 <img>，记得加 object-fit；若是纯色块，可直接设 background-color
需要兼容旧版 Safari？改用 padding-top: 100% + 绝对定位的 hack，但语义性和可维护性下降

响应式断点下怎么保持九宫格？

九宫格在小屏上通常不适合——3×3 在手机上每格太小。别硬撑，用媒体查询降级：

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

关键逻辑：