grid-area プロパティ
grid-area プロパティは、グリッドコンテナにおいての子エレメント（グリッドアイテム）の配置と区割りを指定するプロパティです。グリッドコンテナとは、display:grid;を設定したエレメントのことです。
grid-area プロパティは、グリッドアイテム（子エレメント）に指定します。
方法は２つあります。ひとつは、グリッドアイテムに名称を指定し、その名称を元に grid-template-areas で表示位置と区割りを指定することです。
.grid_container{
display: grid;
grid-template-areas: 'exampleArea exampleArea exampleArea';
}
.chld_element01 {
grid-area: exampleArea;
}
もうひとつは、grid-area プロパティに配置と区割りを直接指定する方法です。この場合は、以下のプロパティを一括して指定できます。
grid-area: 2 / 2 / span 2 / span 3;
構文(Syntax)
CSS
grid-area: grid-area-names | [ grid-row-start / grid-column-start / grid-row-end / grid-column-end ];
DOM(JavaScript)
?String = object.style.gridArea;?
object.style.gridArea=" grid-area-names | [ grid-row-start / grid-column-start / grid-row-end / grid-column-end ]";
値（Values）
| Value | 摘要 |
|---|---|
| grid-area-names | 領域名を定義 |
| grid-row-start | 行（縦）方向の表示位置か、行（縦）方向への連結数 |
| grid-column-start | 列（横）方向の表示位置か、列（横）方向への連結数 |
| grid-row-end | 行（縦）方向の指定位置の1つ前に表示するか、行（縦）方向への連結数 |
| grid-column-end | 列（横）方向の指定位置の1つ前に表示するか、列（横）方向への連結数 |
備考（Remarks）
| 初期値（Default value） | auto auto auto auto |
| 継承（Inherited） | No |
| CSS Animation | Yes |
Example
grid-area の例です。grid-area に名称を指定し、 grid-template-areas で表示位置と区割りを指定する方法と、grid-area に直接指定する方法を紹介します。
grid-area に名称を指定
以下は、grid-area に名称を指定し、 grid-template-areas で表示位置と区割りを指定する方法です。
グリッドアイテム contents01 を横に３つ連結しています。
grid-area に直接指定
以下は、grid-area プロパティに配置と区割りを直接指定する方法です。
グリッドアイテム contents01 を右から上から２番め、２番めに配置し、縦に２つ、横に２つ連結しています。
関連する CSS プロパティ
以下は、grid-area プロパティに関連するプロパティです。
| display:grid; | 並びを設定することができるdisplayプロパティ |
| grid-area | グリッドアイテムに名称を指定 |
| grid-auto-columns | グリッドアイテムの幅 |
| grid-auto-flow | グリッドコンテナの領域を自動的に拡張 |
| grid-auto-rows | 全てのグリッドアイテムの高さ |
| grid-column | グリッドアイテムの列単位の位置と連結数 |
| grid-column-end | 列単位の位置や連結数 |
| grid-column-gap | 列同士のギャップ幅 |
| grid-column-start | 列単位（横）の位置や連結数 |
| grid-gap | グリッドアイテムどうしのギャップのサイズ |
| grid-row | 行単位の位置と連結数 |
| grid-row-end | 行単位の位置や連結数 |
| grid-row-gap | 行同士のギャップ幅 |
| grid-row-start | 行単位の位置や連結 |
| grid-template | グリッドアイテムの並び数やサイズ |
| grid-template-areas | グリッドアイテムの配置や連結 |
| grid-template-columns | グリッドアイテムの列の並び数、幅 |
| grid-template-rows | グリッドアイテムの行の並び数と高さ |
関連（Related）
HTML、CSS、DOMのHTMLエレメント、Windowに関する用途一覧です。
HTML
CSS
- サイズ
-
- height、 width、 max-height、 max-width、 min-height、 min-width、 resize
- スクロール追加
- overflow、 overflow-x、 overflow-y
- マージン、パディング、ボーダー
-
- 共通
- box-sizing、 display
- マージン
- margin、 margin-bottom、 margin-left、 margin-right、 margin-top
- パディング
- padding、 padding-bottom、 padding-left、 padding-right、 padding-top
- ボーダー、罫線
-
- 全体
- border、 border-collapse、 border-color、 border-spacing、 border-style、 border-width
- 上辺
- border-top、 border-top-color、 border-top-left-radius、 border-top-right-radius、 border-top-style、 border-top-width
- 下辺
- border-bottom、 border-bottom-color、 border-bottom-left-radius、 border-bottom-right-radius、 border-bottom-style、 border-bottom-width
- 左辺
- border-left、 border-left-color、 border-left-style、 border-left-width
- 右辺
- border-right、 border-right-color、 border-right-style、 border-right-width
- 角を丸に
- border-radius
- 画像を線に
- border-image、 border-image-outset、 border-image-repeat、 border-image-slice、 border-image-source、 border-image-width
- アウトライン
- outline、 outline-color、 outline-offset、 outline-style、 outline-width
- 配置
-
- 位置調整
- bottom、 left、 right、 top、 position、 z-index
- 横並び（フレックス）
- display:flex;、 align-content、 align-items、 align-self、 justify-content、 flex-wrap、 flex-basis、 flex-direction、 flex-flow
- 配列（グリッド）
- display:grid;、 grid-area、 grid-auto-columns、 grid-auto-flow、 grid-auto-rows、 grid-column、 grid-column-end、 grid-column-gap、 grid-column-start、 grid-gap、 grid-row、 grid-row-end、 grid-row-gap、 grid-row-start、 grid-template、 grid-template-areas、 grid-template-columns、 grid-template-rows、
- フレックス、グリッドの共通 横並び順
- order
- 背景
- background、 background-attachment、 background-blend-mode、 background-clip、 background-color、 background-image、 background-origin、 background-position、 background-repeat、 background-size、 linear-gradient、 radial-gradient
- フィルタ、加工
-
- filter、 transform、 transform-origin
- ブレンド
- isolation、 linear-gradient()、 mix-blend-mode、 radial-gradient()
- 影
- box-shadow
- 透過
- opacity
- 回転
- backface-visibility、
- 立体
- perspective、 perspective-origin
- 切り取り
- clip-path
- カラム
- column-fill、 column-gap、 column-rule、 column-rule-color、 column-rule-style、 column-rule-width、 column-span、 column-width、 columns
- ページ内移動
- scroll-behavior
- 表示、非表示
- visibility
DOM
HTMLエレメント
- インターフェース、クラス
- Document、 Element、 FocusEvent、 Attr
- イベント
- blur、 focus、 focusin、 focusout、 load、 resize、 scroll、 toggle
- プロパティ
- メソッド
Window
- インターフェース
- HashChangeEvent、 PageTransitionEvent、 Window
- イベント
- beforeunload、 hashchange、 load、 pagehide、 pageshow、 unload
- プロパティ
- newURL、 oldURL、 persisted
- メソッド
- clearTimeout()、 setTimeout()