CSS グリッドレイアウトモジュール

ヘッダー
メニュー
メイン
右
フッター

自分で試してみる

グリッドレイアウト

CSSグリッドレイアウトモジュール（CSS Grid Layout Module）は、行と列を持つグリッドベースのレイアウトシステムを提供しており、フロートやポジショニングを使用せずにウェブページデザインを簡単に行うことができます。

ブラウザのサポート

すべての現代ブラウザはグリッド属性をサポートしています。

57.0 16.0 52.0 10 44

グリッド要素

グリッドレイアウトは、親要素および一つまたは複数の子要素で構成されています。

インスタンス

<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>
1
2
3
4
5
6
7
8
9

自分で試してみる

Display属性

HTML要素の display 属性設定が grid または inline-grid 时，它就会成为网格容器。

インスタンス

.grid-container {
  display: grid;
}

自分で試してみる

インスタンス

.grid-container {
  display: inline-grid;
}

自分で試してみる

网格容器的所有直接子元素将自动成为网格项目。

网格列（Grid Columns）

网格项的垂直线被称为列。

网隔行（Grid Rows）

网格项的水平线被称为行。

网格间隙（Grid Gaps）

每列/行之间的间隔称为间隙。

您可以通过使用以下属性之一来调整间隙大小：

  • grid-column-gap
  • grid-row-gap
  • grid-gap

インスタンス

grid-column-gap 属性设置列之间的间隙：

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

自分で試してみる

インスタンス

grid-row-gap 属性设置行之间的间隙：

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

自分で試してみる

インスタンス

grid-gap 属性是 grid-row-gap 和 grid-column-gap 属性的简写属性：

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

自分で試してみる

インスタンス

grid-gap 属性还可用于将行间隙和列间隙设置为一个值：

.grid-container {
  display: grid;
  grid-gap: 50px;
}

自分で試してみる

グリッド線（Grid Lines）

列の間の線は列線（column lines）と呼ばれます。

行の間の線は行線（row lines）と呼ばれます。

グリッドコンテナ内にグリッドアイテムを配置する場合、行番号を参照してください：

インスタンス

グリッドアイテムを列線 1 に配置し、列線 3 で終了させる：

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

自分で試してみる

インスタンス

グリッドアイテムを行線 1 に配置し、行線 3 で終了させる：

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

自分で試してみる