Question

我想创建一个3x3的网格，当在较小的屏幕上时，可以使框在另一个框的下面缩小。盒子应该永远是完美的正方形。

此外，最后两个方框（8 + 9）在较大的屏幕上应该只是一个较长的矩形，但占用的空间与现在相同。 CSS网格可以走到这里吗？这是我得到的：

body {
  background: lightblue;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.grid div {
  width: 100%;
  height: 100%;
  background: white;
  padding: .5em;
}

  <div class="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div>join</div>
    <div>us</div>
  </div>

Answer 1

您可以执行以下操作-

body {
  background: lightblue;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.grid div {
  width: 100%;
  height: 0%;
  padding-bottom: 100%;
  background: white;
}

.grid div:last-child:nth-child(3n - 1) {
  grid-column: span 2;
  height: auto;
  padding-bottom: 0;
}

@media (max-width: 400px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div>join us</div>

</div>

...，然后添加媒体查询以使其具有响应性。

编辑：

我所做的是-

将.grid div的高度更改为0，并添加padding-bottom: 100%以使其成为完美的正方形。
添加了.grid div:last-child:nth-child(3n - 1)以定位最后一个孩子，并使其填充网格的其余部分。

修改2： 添加了媒体查询。

Answer 2

我想让它成为一个简单的 3x3 网格，而且当您调整到移动设备的大小时，该代码也无法正常工作。我尝试时只显示了几个方块。

我从 CSS 中删除了 .grid div:last-child:nth-child(3n - 1)，并添加了一个额外的元素。

在那之后得到了工作和测试的网格。

.grid {
    background: lightblue;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 20px;
}

.grid div {
    width: 100%;
    height: 0%;
    padding-bottom: 100%;
    background: white;
}

@media (max-width: 400px) {
    .grid {
        grid-template-columns: 1fr;
    }

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>

</div>

使用CSS网格创建3x3自适应布局

2 个答案: