Question

我想创建一个等方格的网格。我一直在看CSS 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>

是否可以使用CSS Grid布局创建正方形网格？

2 个答案: