CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSグリッドの基本構造：親要素と子要素で作るレイアウト入門

CSSグリッド（Grid Layout）は、親要素（グリッドコンテナ）と子要素（グリッドアイテム）という2つの役割から成り立っています。親要素に display: grid; を指定すると、その直下の子要素が自動的にグリッドアイテムとして扱われ、行と列に沿って整然と配置されるようになります。

ここでは、6つの子要素を持つシンプルなグリッドを作成する例を紹介します。

コード例

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: auto auto;
      padding: 20px;
    }
    .ele {
      background-color: orange;
      border: 2px solid gray;
      padding: 25px;
      font-size: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Game Board</h1>
  <div class="container">
    <div class="ele">1</div>
    <div class="ele">2</div>
    <div class="ele">3</div>
    <div class="ele">4</div>
    <div class="ele">5</div>
    <div class="ele">6</div>
  </div>
</body>
</html>

コードのポイント解説

1. 親要素（グリッドコンテナ）の設定

.container クラスが親要素にあたります。display: grid; を指定することでこの要素がグリッドコンテナになり、grid-template-columns: auto auto; によって2列のグリッドを定義しています。列幅は auto のため、内容に応じて自動的に調整されます。

2. 子要素（グリッドアイテム）のスタイリング

.ele クラスが子要素です。背景色やボーダー、パディングを設定することで、各マスが視覚的に分かりやすくなっています。6つの要素は定義された2列のグリッドに従い、3行×2列の形で自動的に配置されます。

表示結果のイメージ

このコードを実行すると、オレンジ色のセルが2列ずつ、計3行に並んだ「ゲーム盤」のようなレイアウトが表示されます。列数を変更したい場合は、grid-template-columns の値を増減させるだけで簡単に調整できます。例えば auto auto auto とすれば3列のグリッドになります。

このようにCSSグリッドを使えば、複雑な計算やフロートを使わずに、柔軟で整ったレイアウトを直感的に構築できます。

  1. CSS子セレクター（>）とは？使い方とサンプルコードで解説

    CSSの子セレクターは、特定の親要素の直下にある子要素だけを選択するために使用されるセレクターです。親要素と子要素の間に「>」（大なり記号）を挟んで指定することで、直接の子要素のみがスタイルの適用対象となり、孫要素以降の階層には影響しません。構文CSS子セレクターの基本構文は以下の通りです。element > element { /* 宣言 */ }使用例1次の例では、article要素の直下にあるdiv要素、およびdiv要素の直下にあるp要素に対してスタイルを適用しています。<!DOCTYPE html> <html> <head> <s

  2. CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法

    CSSのbackground-attachmentプロパティは、ページをスクロールした際に、背景画像がビューポート（ブラウザの表示領域）に対してどのように振る舞うかを指定するためのプロパティです。 このプロパティには、主に以下の3つの値を指定できます。 scroll：初期値。背景画像は要素に対して固定され、ページ全体のスクロールに合わせて移動します。 fixed：背景画像がビューポートに対して固定され、ページをスクロールしても背景は一切動きません。 local：背景画像が要素のコンテンツと共にスクロールします。要素自体にスクロール領域がある場合に特に有効です。 構文 CSSのbackgro