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

CSSグリッドの行（Grid Rows）とは？基本と使い方を解説

CSSグリッドの行（Grid Rows）とは

CSSグリッドレイアウトにおいて、グリッドコンテナ内を水平方向に区切る線を「グリッド行（Grid Rows）」と呼びます。下図のように、コンテナを横断する水平線がそれぞれの行の境界を定義しています。

CSSグリッドの行（Grid Rows）とは？基本と使い方を解説

行の定義方法

グリッドの行は、grid-template-rows プロパティを使って明示的に定義できます。

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

この例では、1行目が100px、2行目が200px、3行目はコンテンツの量に応じた高さで自動調整されます。

行間の間隔を調整する

行と行の間隔（ガター）は row-gap プロパティで指定できます。

.container {
  display: grid;
  row-gap: 20px;
}

このように、グリッド行を理解することで、縦方向のレイアウトを柔軟かつ直感的にコントロールできるようになります。

  1. CSSで垂直線（縦線）を作成する方法を解説！初心者向けにわかりやすく紹介

    CSSで垂直線（縦線）を作成したい場合、最もシンプルで一般的な方法は border-left プロパティを使うことです。要素の左側に境界線を表示し、height で高さを指定するだけで、自由な長さの垂直線を簡単に描画できます。 それでは、実際のコード例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>

  2. CSSで3カラムのレイアウトグリッドを作成する方法【コード例付き】

    CSSを使って3列（3カラム）のレイアウトグリッドを作成するには、floatプロパティと幅の指定を組み合わせるのが基本的な手法です。各カラムの幅を約33%に設定して左寄せにすることで、3つの列を横並びに配置できます。以下に具体的なコード例を示します。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body {