CSS - grid-area

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

概要

属性名 grid-area
<grid-row-start> [ / <grid-column-start> [ / <grid-row-end> [ / <grid-column-end> ]? ]? ]?
初期値auto
適用可能要素グリッドアイテム
継承継承しない

サポート (説明)

CSSIEEdgeFirefoxChromeOperaSafari
CSS3×1652574410.1

説明

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 が設定されます。

使用例

下記はいずれも同じ意味を持ちます。

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