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

❮ 前次 ❯

ヘッダ

メニュー

主要

右

フッター

グリッドレイアウト

CSSグリッドレイアウトモジュールは、行と列を備えたグリッドベースのレイアウトシステムを提供し、フロートや配置を使用せずにWebページを簡単に設計できるようにします。

ブラウザのサポート

グリッドプロパティは、すべての最新のブラウザでサポートされています。


57.0	16.0	52.0	10	44

グリッド要素

グリッドレイアウトは、1つ以上の子要素を持つ親要素で構成されます。

例

1

2

3

4

5

6

7

8

9

プロパティの表示

HTML要素は、そのdisplayプロパティが gridまたはに設定されている場合、グリッドコンテナになりinline-gridます。

例

.grid-container {
display: grid;
}

例

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

グリッドコンテナのすべての直接の子は、自動的にグリッドアイテムになります。

グリッド列

グリッドアイテムの垂直線は列と呼ばれます。

グリッド行

グリッドアイテムの水平線は行と呼ばれます。

グリッドギャップ

各列/行の間のスペースはギャップと呼ばれます。

次のいずれかのプロパティを使用して、ギャップサイズを調整できます。

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プロパティを使用して、行ギャップと列ギャップの両方を1つの値に設定することもできます。

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

グリッド線

列間の線は列線と呼ばれます。

行間の線は行線と呼ばれます。

グリッドアイテムをグリッドコンテナに配置するときは、行番号を参照してください。

例

グリッドアイテムを列行1に配置し、列行3で終了させます。

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

例

グリッドアイテムを行1に配置し、行3で終了させます。

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

すべてのCSSグリッドプロパティ

Property	Description
column-gap	Specifies the gap between the columns
gap	A shorthand property for the row-gap and the column-gap properties
grid	A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
grid-area	Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties
grid-auto-columns	Specifies a default column size
grid-auto-flow	Specifies how auto-placed items are inserted in the grid
grid-auto-rows	Specifies a default row size
grid-column	A shorthand property for the grid-column-start and the grid-column-end properties
grid-column-end	Specifies where to end the grid item
grid-column-gap	Specifies the size of the gap between columns
grid-column-start	Specifies where to start the grid item
grid-gap	A shorthand property for the grid-row-gap and grid-column-gap properties
grid-row	A shorthand property for the grid-row-start and the grid-row-end properties
grid-row-end	Specifies where to end the grid item
grid-row-gap	Specifies the size of the gap between rows
grid-row-start	Specifies where to start the grid item
grid-template	A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties
grid-template-areas	Specifies how to display columns and rows, using named grid items
grid-template-columns	Specifies the size of the columns, and how many columns in a grid layout
grid-template-rows	Specifies the size of the rows in a grid layout
row-gap	Specifies the gap between the grid rows

❮ 前次 ❯

CSSチュートリアル

CSS Advanced

CSSレスポンシブ