gapプロパティでアイテム間余白を一発指定
display: gridにして、gapプロパティを使うだけで「アイテム間の余白」を簡単に指定できる。また、gridレイアウトは行・列を指定してアイテムを任意で並べるのが基本的な使い方だが、カラムの指定にrepeat( アイテム数, 1fr )と指定することで、指定のカラム数で均等幅の繰り返しグリッドも簡単に作ることができる。
また、gapプロパティはflexboxでも指定することができる。
- fr：fraction（分割、分数の意味）の略で、gridレイアウトの中で利用できる新しい単位。親要素に余白がある場合に指定した比率でアイテムを引き伸ばすことができる（flexboxのflex-growと同じような挙動）
- repeat( 繰り返し数, サイズ )：繰り返し数はgrid-template-columnsで使うならカラム数、grid-template-rowsで使うなら行数を表す。サイズは各アイテムの大きさを数値・関数などでしていする
.cardList04 {
display: grid; /* girdレイアウトにする */
gap: 20px; /* 隣接するアイテム間余白を20pxに設定 */
}
@media screen and (min-width: 768px),print {
.cardList04 {
grid-template-columns: repeat(2,1fr); /* 均等2カラム指定 */
}
}
@media screen and (min-width: 992px),print {
.cardList04 {
grid-template-columns: repeat(3,1fr); /* 均等3カラム指定 */
}
}
@media screen and (min-width: 1200px),print {
.cardList04 {
grid-template-columns: repeat(4,1fr); /* 均等4カラム指定 */
}
}メディアクエリなしでレスポンシブ
gridレイアウトを使うとメディアクエリを使わずにカラム数を自動的に変化させることも可能。ポイントはrepeat()の中でアイテム数をauto-fitまたはauto-fill、アイテム幅をminmax()関数を使って指定すること。指定したアイテムがコンテナに入りきらなくなった際、自動的に次の行にカラムを移動させ、複数行で表示できるのがauto-fit/auto-fillという値。auto-fitは一行に配置可能なアイテム数に対して実際のアイテムが不足した場合にそれぞれのアイテムを拡張して埋め合わせし、auto-fillは埋め合わせせずそのまま余白を表示する。
アイテム数があまりにも少ないと、アイテム数不足のモジュールだけ想定外に広がってしまう（auto-fitの場合）というデメリットもある。
.cardList04 {
display: grid; /* girdレイアウトにする */
gap: 20px; /* アイテム間余白を20pxに設定 */
grid-template-columns: repeat(auto-fill,minmax(335px,1fr));
}※最小値の335pxは、コンテナ幅1400pxの時4カラムで表示したいというデザイン的な意図から算出している。
コンテナ幅：1400px
カラム数：4
gap：20px × 3個 = 60px
各カラムの幅 = (1400px – 60px) / 4 = 335px ※これが実質最小値
CSSのサブグリッド（subgrid）で複数カードの水平グリッドを揃える
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari、Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。
subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます。
サブグリッドにするには、以下のプロパティを追加します。サブグリッド以後は、高さの異なるコンテンツの整列が可能になります。
grid-template-rows: subgrid;