是否可以使用 CSS 网格布局创建正方形网格？ [复制]

Question

我想创建一个等正方形的网格。我一直在研究 CSS Grid，因为我认为可以在网格中创建相等的宽度和高度区域。但我在 Grid 规范中没有看到任何关于它的内容。基本代码是这样的：

.squaregrid {
  max-width: 600px;
  margin: 20px;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  grid-gap: 10px;
}

.cell {
  background: #ddd;
  font-size: 2em;
}

<div class="squaregrid">
  <div class="cell">A</div>
  <div class="cell">B</div>
  <div class="cell">C</div>
  <div class="cell">D</div>
  <div class="cell">E</div>
  <div class="cell">F</div>
  <div class="cell">G</div>
  <div class="cell">H</div>
  <div class="cell">I</div>
</div>

我得到一个 3x3 的网格，但每个“单元格”的高度只是字母的大小（因为 fr 单位使行的高度相对于彼此，而不是相对于列宽）。

我可以使用固定大小而不是 1fr，但它当然没有响应。

我知道 padding-bottom 用于保持纵横比的技巧，但这涉及每个单元格的多个包装器，另外，如果我这样做，实际上不需要使用 Grid，我可以使用常规 div 或 flexbox。

还有其他解决方案吗？

回答“重复”问题并不能解决问题。

Answer 1

我得到一个 3x3 的网格，但每个“单元格”的高度只是字母的大小（因为 fr 单位使行的高度相对于彼此，而不是相对于列宽）。

当你这么说的时候……

grid-template: repeat(3, 1fr) / repeat(3, 1fr);

这是这个的简写...

grid-template-rows: 1fr 1fr 1fr
grid-template-columns: 1fr 1fr 1fr
grid-template-areas: none

您正在创建一个 3x3 的网格，其中列和行占用了平均分配的可用空间。

但您希望所有单元格都是方形的。

除非容器具有完全相同的尺寸，否则单元格不能使用fr 单位为正方形。

您已为容器 (max-width: 600px) 设置了最大宽度，但没有定义高度。因此，期望看到矩形单元格。

如果你想要正方形，试试这样的：

.squaregrid {
    width: 400px;
    height: 400px;
    margin: 20px;
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    grid-gap: 10px;
}
.cell {
    background: #ddd;
    font-size: 2em;
}

<div class="squaregrid">
    <div class="cell">A</div>
    <div class="cell">B</div>
    <div class="cell">C</div>
    <div class="cell">D</div>
    <div class="cell">E</div>
    <div class="cell">F</div>
    <div class="cell">G</div>
    <div class="cell">H</div>
    <div class="cell">I</div>
</div>

Answer 2

您可以使用vw 单位使其响应。而不是1fr 使用30vw 像这样：

.squaregrid {
    max-width: 600px;
    margin: 20px;
    display: grid;
    grid-template: repeat(3, 30vw) / repeat(3, 30vw);
    grid-gap: 10px;
}
.cell {
    background: #ddd;
    font-size: 2em;
}

<div class="squaregrid">
    <div class="cell">A</div>
    <div class="cell">B</div>
    <div class="cell">C</div>
    <div class="cell">D</div>
    <div class="cell">E</div>
    <div class="cell">F</div>
    <div class="cell">G</div>
    <div class="cell">H</div>
    <div class="cell">I</div>
</div>