grid

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

gridCSS のプロパティで、一括指定プロパティとして明示的・暗黙的なすべてのグリッドプロパティを単一の宣言で設定します。

grid を使用すると、一方の軸を grid-template-rows または grid-template-columns を使用して設定し、もう一方の軸でどのように内容物を自動反復させるかを、暗黙のグリッドプロパティである grid-auto-rows, grid-auto-columns, grid-auto-flow で設定します。

試してみましょう

メモ: 指定しないサブプロパティは、通常の一括指定と同様に初期値に設定されます。また、溝に関するプロパティはこの一括指定では初期化されません。

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

css
/* <'grid-template'> 値 */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [line-name1] "a" 100px [line-name2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* <'grid-template-rows'> /
   [ auto-flow && dense? ] <'grid-auto-columns'>? 値 */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
   <'grid-template-columns'> 値 */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/* グローバル値 */
grid: inherit;
grid: initial;
grid: revert;
grid: revert-layer;
grid: unset;

<'grid-template'>

grid-template を定義し、これには grid-template-columns, grid-template-rows, grid-template-areas が含まれます。

<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?

grid-template-rows プロパティを明示的に設定 (および grid-template-columns プロパティを none に設定) することで行トラックを設定し、 grid-auto-columns プロパティを設定 (および grid-auto-rowsauto に設定) することで列トラックの自動反復方法を設定します。 dense が設定されていれば、 grid-auto-flowcolumn に設定されます。

ほかの grid のサブプロパティはすべて、初期値に初期化されます。

[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

grid-template-columns プロパティを明示的に設定 (および grid-template-rows プロパティを none に設定) することで列トラックを設定し、 grid-auto-rows プロパティを設定 (および grid-auto-columnsauto に設定) することで行トラックの自動反復方法を設定します。 dense が設定されていれば、 grid-auto-flowcolumn に設定されます。

ほかの grid のサブプロパティはすべて、初期値に初期化されます。

公式定義

初期値一括指定の次の各プロパティとして
適用対象グリッドコンテナー
継承なし
パーセント値一括指定の次の各プロパティとして
計算値一括指定の次の各プロパティとして
  • grid-template-rows: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
  • grid-template-columns: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
  • grid-template-areas: 指定通り
  • grid-auto-rows: 指定されたパーセント値または絶対的な長さ
  • grid-auto-columns: 指定されたパーセント値または絶対的な長さ
  • grid-auto-flow: 指定通り
  • grid-column-gap: 指定されたパーセント値または絶対的な長さ
  • grid-row-gap: 指定されたパーセント値または絶対的な長さ
  • column-gap: 指定通りで、 <length> は絶対長になり、 normal の計算値は段組み要素を除き 0 になる
  • row-gap: 指定通りで、 <length> は絶対長になり、 normal の計算値は段組み要素を除き 0 になる
アニメーションの種類一括指定の次の各プロパティとして

形式文法

grid = 
<'grid-template'> |
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? |
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

<grid-template> =
none |
[ <'grid-template-rows'> / <'grid-template-columns'> ] |
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

<grid-template-rows> =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?

<grid-auto-columns> =
<track-size>+

<grid-auto-rows> =
<track-size>+

<grid-template-columns> =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?

<line-names> =
'[' <custom-ident>* ']'

<track-size> =
<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> ) |
fit-content( <length-percentage [0,∞]> )

<explicit-track-list> =
[ <line-names>? <track-size> ]+ <line-names>?

<track-list> =
[ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

<auto-track-list> =
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

<line-name-list> =
[ <line-names> | <name-repeat> ]+

<track-breadth> =
<length-percentage [0,∞]> |
<flex [0,∞]> |
min-content |
max-content |
auto

<inflexible-breadth> =
<length-percentage [0,∞]> |
min-content |
max-content |
auto

<length-percentage> =
<length> |
<percentage>

<track-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )

<fixed-size> =
<fixed-breadth> |
minmax( <fixed-breadth> , <track-breadth> ) |
minmax( <inflexible-breadth> , <fixed-breadth> )

<fixed-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<auto-repeat> =
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<name-repeat> =
repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )

<fixed-breadth> =
<length-percentage [0,∞]>

グリッドレイアウトの作成

HTML

html
<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

css
#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

結果

仕様書

Specification
CSS Grid Layout Module Level 2
# grid-shorthand

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
grid

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報