CSS - grid-area

トップ > CSSリファレンス > grid-area

概要

属性名 grid-area
<grid-line> [ / <grid-line> ]{0,3}
初期値auto
適用可能要素グリッドアイテム
継承継承しない
サポートhttps://caniuse.com/mdn-css_properties_grid-area

説明

グリッドのアイテムに指定して、どの位置に表示するかを指示します。gridgrid-template-areas で定義したエリア名を指定するか、もしくは、グリッド線の開始位置・終了位置を指定します。

grid-row-startgrid-column-startgrid-row-endgrid-column-end をまとめて指定します。grid-column-end を省略した場合、grid-column-start が <custom-ident> の場合はその値、さもなくば auto が設定されます。grid-row-end を省略した場合、grid-row-start が <custom-ident> の場合はその値、さもなくば auto が設定されます。grid-column-start を省略した場合、grid-row-start が <custom-ident> の場合はその値、さもなくば auto が設定されます。

グリッドに関する詳細は「とほほのGrid入門」を参照してください。

使用例

エリア名を指定する場合か下記の様に用います。

CSS
.header {
  grid-area: header;
}

縦の開始線・横の開始線・縦の終了線・横の終了線を指定する方法もあります。下記はいずれも同じ意味になります。

CSS
.grid-item-1 {
  grid-area: 1 / 2 / 3 / 4;
}
.grid-item-2 {
  grid-rows: 1 / 3;
  grid-columns: 2 / 4;
}
.grid-item-3 {
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 3;
  grid-column-end: 4;
} 

関連項目

リンク


Copyright (C) 2019 杜甫々
初版:2019年12月30日、最終更新:2019年12月30日
http://www.tohoho-web.com/css/prop/grid-area.htm