Gridの基本

CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 31/43。

CSS Gridは、行と列を使用してウェブページを簡単に作成できるレイアウトシステムです。floatや複雑な位置指定（positioning）を必要とせずに、複雑でレスポンシブなレイアウトを構築するのに最適です。さらに、すべてのモダンブラウザで動作します。

グリッドコンテナを作成するには、displayプロパティを使用します：

.container {
  display: grid;
}

grid-template-columns を px または fr 単位（フラクション）とともに使用して、グリッドの列を定義します：

/* これにより、中央の列が他の2つの列の2倍のスペースを占める3つの列が作成されます。 */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

grid-template-rows で行を定義します。gap プロパティを使用して、グリッドアイテム間にスペースを追加します。

/* 2つの行を持つグリッドを作成します。1つ目は高さ100px、2つ目は200pxです */
.container {
  display: grid;
  grid-template-rows: 100px 200px;
  gap: 20px;
}

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

チャレンジ

簡単

grid-container という名前のクラスに対して、以下の CSS ルールを作成してください。

display プロパティを設定してグリッドを作成する
fr 単位を使用して、同じ幅の 3 つの列を作成する
2 つの行を作成する：1 行目は高さ 150px、2 行目は高さ 250px
すべてのグリッドアイテムの間に 20px のギャップを追加する

grid-container クラスの CSS コードのみを記述してください。

チートシート

CSS Gridは、行と列を使用してウェブページを作成するためのレイアウトシステムです。グリッドコンテナを作成するには、display: gridを使用します：

.container {
  display: grid;
}

pxまたはfr単位（フラクション）を使用して、grid-template-columnsで列を定義します：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3つの列、中央は2倍の幅 */
}

grid-template-rowsで行を定義し、gapで間隔を追加します：

.container {
  display: grid;
  grid-template-rows: 100px 200px; /* 特定の高さを持つ2つの行 */
  gap: 20px; /* グリッドアイテム間のスペース */
}

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
    <style>
        .item{
            border: 2px solid black;
            background-color: #82f5d0;
        }
     /* Add your CSS code here: */
    
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。