html - CSS グリッドを使用して 3x3 のレスポンシブ レイアウトを作成する

小さい画面でボックスを上下に縮小する 3x3 グリッドを作成したいと考えています。ボックスは常に完全な正方形である必要があります。

また、最後の 2 つのボックス (8 + 9) は、より大きな画面上では 1 つの長い長方形になるはずですが、現在と同じスペースを占めます。ここに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>

------------------------

次のようなことができます -

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: メディアクエリを追加しました。

0

------------------------

シンプルな 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>