CSS grid 属性

定義と用法

グリッド属性は以下の属性のショートカット属性です：

も参照してください：

CSS 教程：CSS 网格容器

実例

例 1

3列グリッドレイアウトを作成し、1行の高さを150ピクセルにします：

.grid-container {
  表示: グリッド;
  グリッド: 150px / auto auto auto;
}

実際に試してみてください

例 2

2行を指定し、"item1" が最初の2行の最初の2列を越えて配置されるようにします（5列グリッドレイアウトを使用）：

.item1 {
  grid-area: myArea;
}
.grid-container {
  表示: グリッド;
  グリッド:
    'myArea myArea ...'
    'myArea myArea ...';
}

実際に試してみてください

例 3

すべてのプロジェクトに名前をつけ、既製のウェブページテンプレートを作成します：

.item1 { grid-area: ヘッダー; }
.item2 { grid-area: メニュー; }
.item3 { grid-area: メイン; }
.item4 { grid-area: 右; }
.item5 { grid-area: フッター; }
.grid-container {
  表示: グリッド;
  グリッド:
    header header header header header
    'menu main main main right right'
    'menu footer footer footer footer';
}

実際に試してみてください

CSS 文法

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;

属性値

値 説明
none デフォルト値。行や列のサイズを定義しません。
grid-template-rows / grid-template-columns 列と行のサイズを指定します。
grid-template-areas 名前付きプロジェクトを使用するグリッドレイアウトを指定します。
grid-template-rows / grid-auto-columns 行のサイズ（高さ）と列の自動サイズを指定します。
grid-auto-rows / grid-template-columns 行の自動サイズを指定し、grid-template-columns 属性を設定します。
grid-template-rows / grid-auto-flow grid-auto-columns 行のサイズ（高さ）を指定し、自動配置されたアイテムの配置方法と列の自動サイズを決定します。
grid-auto-flow grid-auto-rows / grid-template-columns 自動配置されたアイテムの配置方法と行の自動サイズを指定し、grid-template-columns 属性を設定します。
initial この属性をデフォルト値に設定します。参照 initial。
inherit この属性は親要素から継承されます。参照 inherit。

技術的詳細

デフォルト値： none none none auto auto row
継承： いいえ
アニメーション作成： はい、個別のプロパティを参照してください。アニメーション関連属性。
バージョン： CSS Grid Layout Module Level 1
JavaScript 文法： object.style.grid="250px / auto auto auto"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44

も参照してください：

CSS 参考マニュアル：grid-template-areas 属性

CSS 参考マニュアル：grid-template-rows 属性

CSS 参考マニュアル：grid-template-columns 属性

CSS 参考マニュアル：grid-auto-rows 属性

CSS 参考マニュアル：grid-auto-columns 属性

CSS 参考マニュアル：grid-auto-flow 属性

CSS 参考マニュアル：grid-row-gap 属性

CSS 参考マニュアル：grid-column-gap 属性