Flexboxで複数行のグリッドを作りたいが、アイテムの幅や配置が意図通りにならない

Question

実現したいこと

サービス紹介でカードを２段に配置。上段は４枚、下段は３枚ですべて同じサイズの中央揃えに実装したいです。

発生している問題・分からないこと

grid columnで上段は４枚、下段は３枚には分けれました。しかしカードのサイズが画面幅いっぱいに合うように伸びてしまいすべて同じサイズになりませんでした。
カードが上段４枚、下段３枚ですべて同じサイズになる方法はありますでしょうか？？

歯科医院の模写最中につまずいています。

該当のソースコード

<div class="grid-container">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
  <div class="card">5</div>
  <div class="card">6</div>
  <div class="card">7</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.card {
  background-color: palevioletred;
}
.card:nth-child(-n + 3) {
  grid-column: span 4;
}
.card:nth-child(n + 4) {
  grid-column: span 3;
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

以下の方法が出てきました。調べあさりましたが、結果このflex-boxの方法かgrid columnの方法になりました。

• リスト番号リストflex-box用いて、flex-wrap width〇％
• リスト```width: calc((100% - (20px * 3)) / 4);

### 補足
可能性がありそうな方法はすべて試しています。
私の今の実力では難しいようなのでどなたかお助けいただけると幸いです。

Comments

[Lhankor_Mhy]

ご提示のコードだと、上3下4になるようでした。

Answer 1

引用テキスト上段は４枚、下段は３枚ですべて同じサイズの中央揃えに実装したいです。

gridを使った方法は既に出ているので、flex-boxを使う方法を。

.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.card {
  background-color: palevioletred;
  width: calc((100% - (20px * 3)) / 4);;
}

Answer 2

「上段は４枚、下段は３枚ですべて同じサイズの中央揃え」とのことですが、ご提示のコードだと上3段下4段になるようでした。

上3段下4段であれば、このようにするとどうでしょうか。

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 20px;
}
.card{
  grid-column: span 2;
}
.card:nth-child(1) {
  grid-column: 2 / span 2;
}

上4段下3段であれば、このようにするとどうでしょうか。

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 20px;
}
.card{
  grid-column: span 2;
}
.card:nth-child(5) {
  grid-column: 2 / span 2;
}

Answer 3

どういうこと？
普通は指定すればすべて同じサイズになる

ていうか解決するために自分でソースコード書いた？
たった43行だけど。