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

CSSグリッドラインとは?列線・行線の基本と使い方を実例で解説

CSS Gridレイアウトにおけるグリッドライン(Grid Lines)とは、グリッド内の列と行を区切る仮想的な線のことです。グリッドラインには「列線(カラムライン)」と「行線(ローライン)」の2種類があり、これらの線の位置を基準にすることで、要素を柔軟かつ精密に配置できます。

列線と行線の違い

列線(Column Lines)は、各カラム(列)とカラムの間にある垂直方向の線です。一方、行線(Row Lines)は、各行と行の間にある水平方向の線です。

たとえば3列×2行のグリッドでは、列線は両端を含めて4本、行線は上下の端を含めて3本存在します。これらの線には左上を起点として順に番号が振られており、その番号を指定することでアイテムの開始位置や終了位置、またがる範囲を自由にコントロールできます。

グリッドラインを使った配置のサンプル

以下は、grid-row-startプロパティとgrid-row-endプロパティを使用して、特定の要素を複数の行にまたがらせて配置する例です。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: green;
            grid-template-columns: auto auto;
            padding: 20px;
            grid-gap: 20px;
         }
         .container > div {
            background-color: orange;
            border: 2px solid gray;
            padding: 35px;
            font-size: 30px;
            text-align: center;
         }
         .ele1 {
            grid-row-start: 1;
            grid-row-end: 6;
         }
      </style>
   </head>
   <body>
      <h1>Game Board</h1>
      <div class = "container">
         <div class = "ele1">1</div>
         <div class = "ele2">2</div>
         <div class = "ele3">3</div>
         <div class = "ele4">4</div>
         <div class = "ele5">5</div>
         <div class = "ele6">6</div>
      </div>
   </body>
</html>

コードのポイント解説

  • display: grid; — コンテナをグリッドコンテナとして定義します。
  • grid-template-columns: auto auto; — 自動幅の2列からなるグリッドを作成します。
  • grid-gap: 20px; — セル同士の間隔を20pxに設定します。
  • .ele1 — grid-row-start: 1;(1本目の行線から)とgrid-row-end: 6;(6本目の行線まで)を指定することで、要素1が5行分の高さにまたがって表示されます。必要に応じて暗黙的な行も自動的に生成されます。

まとめ

グリッドラインは、CSS Gridレイアウトで要素を思いどおりに配置するための重要な概念です。grid-row-start / grid-row-end、grid-column-start / grid-column-endといったプロパティと組み合わせれば、複雑なレイアウトも直感的かつ効率的に構築できます。まずはシンプルなグリッドを作り、行線・列線の番号を意識しながら配置を試してみると理解が深まります。

  1. CSSコメントの書き方と使い方を徹底解説

    CSSコメントとは CSSでは、スタイル宣言に対してコメント（注釈）を記述することができます。コメントを適切に活用することで、コードの可読性が向上し、そのCSSが何を意図しているのかを他の開発者（や将来の自分自身）が理解しやすくなります。 CSSのコメントは、C言語スタイルの構文に従います。コメントはスラッシュとアスタリスクで始まり、アスタリスクとスラッシュで終わります。/* と */ の間に記述された内容はすべてブラウザに無視されるため、ページの表示には一切影響しません。 コメントの基本構文 CSSコメントの構文は以下のとおりです。 /* コメント */ コメントは単一行でも複数行でも記述で

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

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