Flexboxによる柔軟なカードグリッド

Flexboxによるレスポンシブカードグリッド

カードグリッドはモダンWebデザインの至る所で使われています。Flexboxとflex-wrapで、任意のコンテナ幅に適応するレスポンシブカードグリッドを作成します。

CSSコード

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 300px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
}

.card-body {
  flex: 1;
}

.card-footer {
  flex: 0 0 auto;
}

仕組み

• グリッドコンテナ: flex-wrap: wrapでカードが新しい行に流れることを許可。gap: 24pxで一貫した間隔。
• カード: flex: 1 1 300pxで各カードは最小300pxから開始し、スペースを埋めるように拡大。max-width: 400pxでカードの過度な拡大を防止。
• カード内部: 各カードはカラムフレックスコンテナで、コンテンツ高さに関係なくフッターが下部に配置。

等高カード

Flexboxは同じ行のすべてのアイテムに自動的に等しい高さを与えます（デフォルトのalign-items: stretch設定時）。異なる量のコンテンツを持っていても、行内のすべてのカードは同じ高さになります。

最後の行の処理

最後の行はアイテム数が少ないことが多く、flex-grow: 1では完全な行のアイテムより幅広くなります。解決策としてflex: 0 1 300px（拡大しない）またはmax-widthの使用を検討してください。