CSS - グリッドレイアウト：入門ガイド

こんにちは、未来のウェブデザインスーパースター！今日は、CSS グリッドレイアウトの世界に一緒に飛び込んでみましょう。コードを書いたことがない方も心配しないでください。あなたの親切なガイドとして、ステップバイステップで進めていきます。このチュートリアルの終わりまでに、プロ顔負けのスリムでレスポンシブなレイアウトを作成できるようになるでしょう！

CSS - Grid Layout

グリッドレイアウトとは？

部屋に家具を並べるときを思い浮かべてみてください。空間を行と列に分けて、すべてをきれいに整理するかもしれません。CSS グリッドレイアウトは、ウェブページで同じことをする东西です！

CSS グリッドレイアウトは、ウェブページ上に二次元のレイアウトを作成する強力なツールです。ウェブページ上に見えないグリッドを持っていて、その中にコンテンツを好きな場所に配置することができます。すごいですね？

グリッド要素

深く掘り下げる前に、いくつかの主要な用語に慣れ親しんでみましょう：

グリッドコンテナ：すべてのグリッドアイテムを保持する親要素です。
グリッドアイテム：グリッドコンテナの子要素です。
グリッドライン：グリッドの構造を成す分界線です。
グリッドトラック：グリッドラインの間のスペース（行または列）です。
グリッドセル：行と列の交差点です。
グリッドエリア：4つのグリッドラインに囲まれた長方形のスペースです。

これらが今は混乱するかもしれませんが、すぐに実際に見てみましょう！

display Grid プロパティ

簡単な例から始めましょう。基本の3x3グリッドを作成したいとします。以下のようにします：

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}

.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}

以下のように分解してみましょう：

コンテナに display: grid; を設定して、グリッドレイアウトを有効にします。
grid-template-columns: auto auto auto; で、等幅の3つの列を作成します。
グリッドアイテムのスタイルを設定して可視化します。

これで、初めてのグリッドレイアウトを作成しました。どれだけ素晴らしいでしょうか！

グリッドの行と列

今度は行と列についてもう少し具体的に見てみましょう。正確なサイズを定義できます：

.grid-container {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 80px 200px;
}

これで以下のグリッドが作成されます：

3つの列：100px、200px、100px 幅
2つの行：80px、200px 高さ

百分率や新しい fr 単位（利用可能なスペースの分数）など、異なる単位も使用できます：

.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
}

これで同じレイアウトが作成されますが、列は利用可能なスペースに基づいて流動的にサイズ変更されます。

グリッドギャップ

時々、グリッドアイテムの間に少し空間が必要です。その場合、grid-gap が役立ちます：

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}

これで、すべての行と列の間に10pxのギャップが追加されます。行と列のギャップを個別に設定することもできます：

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 10px;
grid-column-gap: 20px;
}

CSS グリッドライン

先ほど話したグリッドラインを思い出してください。これを使ってアイテムを正確に配置することができます：

<div class="grid-container">
<div class="item1">ヘッダー</div>
<div class="item2">メニュー</div>
<div class="item3">メイン</div>
<div class="item4">サイド</div>
<div class="item5">フッター</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 300px 100px;
gap: 10px;
}

.item1 {
grid-column: 1 / span 4;
}

.item2 {
grid-row: 2 / span 2;
}

.item3 {
grid-column: 2 / span 2;
}

.item4 {
grid-column: 4;
grid-row: 2;
}

.item5 {
grid-column: 2 / span 3;
grid-row: 3;
}

これで、ヘッダーが全幅にわたる、サイドメニュー、メインコンテンツエリア、サイドバー、フッターがある複雑なレイアウトが作成されます。これらの値を遊んでみて、レイアウトがどのように影響を受けるかを確認してください！

CSS グリッドプロパティのリファレンス

以下に、いくつかの一般的なCSS グリッドプロパティのリファレンスを示します：

プロパティ	説明
display: grid;	グリッドコンテナを定義します
grid-template-columns	列の数とサイズを指定します
grid-template-rows	行の数とサイズを指定します
grid-gap	グリッドアイテムの間のギャップを設定します
grid-column-start	グリッドアイテムの開始位置を指定します
grid-column-end	グリッドアイテムの終了位置を指定します
grid-row-start	グリッドアイテムの開始位置を指定します
grid-row-end	グリッドアイテムの終了位置を指定します
grid-area	グリッドアイテムのサイズと位置を指定します

そして、あなたはCSS グリッドレイアウトの素晴らしい世界の最初のステップを踏み出しました。練習は完璧を生みますので、さまざまなレイアウトとプロパティを試してみてください。すぐに、複雑でレスポンシブなレイアウトを簡単に作成できるようになるでしょう。

ハッピーコーディング、未来のグリッドマスターたち！

Credits: Image by storyset