CSS - grid-area

概要

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

説明

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

grid-row-start、grid-column-start、grid-row-end、grid-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;
}

リンク

初版：2019年12月30日、最終更新：2019年12月30日

https://www.tohoho-web.com/css/prop/grid-area.htm

CSS - grid-area

概要

説明

使用例

関連項目

リンク