CSS Gridで3列レイアウトを作る方法を初心者向けに解説。repeat()・1fr・gapの意味から、2列・4列への変更、5つのカードを並べたときの中央寄せ、レスポンシブ対応まで実例を交えて紹介します。画面幅に合わせて列数を自動調整する方法も解説します。

FlexboxとCSS Gridはどう使い分ける？それぞれ得意なレイアウトや3列カードでの違い、外側をGrid・内側をFlexboxにする組み合わせ方を図解と実例で解説します。Webデザイン・Web制作を学ぶ方に向けて、実制作で迷わない考え方を紹介します。