レイアウト：CSS Gridでカードを並べよう

完成イメージ

デスクトップでは2列でカードが並ぶ
各カードはボックス風（背景色・角丸・シャドウあり）
スマホでは1列に切り替わる

作成ファイル・保存場所

css-practice フォルダを作成し、以下のファイルを用意してください。

ファイル名	内容
css-grid-cards.html	Gridレイアウト用のHTMLファイル（コード模写）
css-grid-cards.css	CSS Gridを使ったスタイルシートファイル

HTMLファイルとCSSファイルは連携させて <link> タグで読み込みましょう。
HTMLの内容は下記より、コードを模写して入力します（BEM記法を使用）。

目的

CSS Gridの display: grid を使って、2列のカードレイアウトを作成できるようになる
gap を使ってカード間の余白を設定する
.card のような繰り返し要素にデザインを適用する力を身につける

チェックポイント

親要素に display: grid が指定されているか
grid-template-columns: 1fr 1fr; で2列に分割されているか
各 .card がきれいに並び、適切な余白があるか
レスポンシブ対応（スマホでは1列）もできているか

HTMLは模写しよう

下記のHTML構造を参考に、ファイル css-practice01.html に自分で入力しましょう。
class名にはBEM記法が使われています。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>CSS Practice 01</title>
    <link rel="stylesheet" href="css-grid-cards.css">
</head>
<body>
    <main class="card-list">
        <section class="card">
            <h2 class="card__title">HTMLとは？</h2>
            <p class="card__text">Webページの構造を作るためのマークアップ言語です。</p>
        </section>

        <section class="card">
            <h2 class="card__title">CSSとは？</h2>
            <p class="card__text">Webページにデザインやレイアウトを加えるためのスタイルシートです。</p>
        </section>

        <section class="card">
            <h2 class="card__title">JavaScriptとは？</h2>
            <p class="card__text">Webページに動きを加えるためのプログラミング言語です。</p>
        </section>

        <section class="card">
            <h2 class="card__title">PHPとは？</h2>
            <p class="card__text">Webサーバー上で動作し、フォーム処理やデータベース連携に使われるスクリプト言語です。</p>
        </section>
    </main>
</body>
</html>

🏋️ トレーニングスタート！

ここからは、自分の力でCSSを書いてレイアウトと装飾を整えるトレーニングです。
css-practice01.css を作成し、以下のようなことを目標に書いてみましょう。

CSSで指定する内容（ヒント）

.card-list に display: grid と grid-template-columns: 1fr 1fr;
gap でカード間にスペースを追加
.card に background, padding, border-radius, box-shadow など
スマホ表示では1列にするよう、@media を使ってみましょう！

補足

grid-template-columns: 1fr 1fr; は、「横に2列に並べる」という指定です。 1fr は「全体を均等に分ける」という意味で、2つ書けば 50%ずつの2列になります。レスポンシブ対応では、@media でこの指定を 1fr（1列）に切り替えると、スマホでも見やすくなります。

応用ポイント

repeat(2, 1fr) や auto-fit を使った柔軟なGrid指定にチャレンジ！
.card__title, .card__text にフォントサイズや行間の指定を加えてもOK

解答例（CSS）

/* ベースのリセット（任意） */
body {
    margin: 0;
    font-family: sans-serif;
    background-color: #f5f5f5;
}

/* Gridレイアウトの親要素 */
.card-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 960px;
    margin: 4rem auto;
    padding: 0 1rem;
}

/* 各カードのデザイン */
.card {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* タイトルの装飾 */
.card__title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: #333;
}

/* テキストの装飾 */
.card__text {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
}

/* レスポンシブ：スマホでは1列表示に */
@media (max-width: 768px) {
    .card-list {
        grid-template-columns: 1fr;
    }
}