レスポンシブなプロジェクトグリッド
CSSファイルなしのCSS: Gridでレイアウト
優れたポートフォリオには、作品をきれいに見せる方法が欠かせません。定番のパターンはプロジェクトカードのグリッド — 画面サイズに合わせて自動で並び替わる、整然とした行と列のレイアウトです。
昔のやり方では、float や clearfix と格闘する必要がありました。今は？ 欲しいものを記述するだけ — 「等幅の3カラムを、隙間つきで」 — と伝えれば、Tailwind のグリッドユーティリティが残りを引き受けてくれます。CSSファイルは不要です。
このレッスンではレスポンシブなプロジェクトグリッドを作ります。見出しの下に、3枚のカードを収めた grid コンテナを置きます。終わる頃には、これから何度も手に取ることになる3つの道具 — grid、grid-cols-3、gap — を理解できているはずです。
手順
グリッドの上に h2 のセクション見出しを追加して、訪問者が何を見ているのか分かるようにしましょう。
ヒント： 使用例: `<h2 class="text-3xl font-bold mb-8 text-center">制作実績</h2>`
どこに書けばいい？
<!-- ここにプロジェクトグリッドを作りましょう -->12 行目に書きましょう — そのコメントの下、すでに書いたコードの後ろです。
grid クラスを使い、カード間に gap を設けたグリッドコンテナの div を作りましょう。
中サイズ以上の画面では、グリッドが等幅の3カラムで表示されるようにしましょう。
article 要素を使って、タイトルと説明付きのプロジェクトカードをグリッドの中に少なくとも1枚追加しましょう。
あなたのコード
このステップで作りたいものを伝えてください。コードを書きます。あとは「適用」をクリックすればエディタに反映されます。 このステップ：グリッドの上に h2 のセクション見出しを追加して、訪問者が何を見ているのか分かるようにしましょう。