CSS グリッドアイテム
- 前のページ CSS グリッドコンテナ
- 次のページ CSS 例
子要素（プロジェクト）
グリッドコンテナはグリッドプロジェクトを含んでいます。
デフォルトでは、コンテナは各行の各列にグリッドプロジェクトを持っていますが、プロジェクトのスタイルを設定して、複数の列および/または行を跨るようにすることができます。
grid-column 属性：
grid-column 属性はプロジェクトをどの列に配置するかを定義します。
プロジェクトの開始位置と終了位置を定義できます。
注記：grid-column 属性は grid-column-start と grid-column-end 属性のショートカット属性です。
プロジェクトを配置するには、行番号（line numbers）を参照するか、プロジェクトが跨る列数を定義するために「span」キーワードを使用することができます。
例
"item1" を第 1 列から始め、第 5 列の前に終わります：
.item1 {
grid-column: 1 / 5;
}
例
"item1" を第 1 列から始め、3 列を覆います：
.item1 {
grid-column: 1 / span 3;
}
例
"item2" を第 2 列から始め、3 列を覆います：
.item2 {
grid-column: 2 / span 3;
}
grid-row 属性：
grid-row 属性はプロジェクトをどの行に配置するかを定義します。
プロジェクトの開始位置と終了位置を定義できます。
注記：grid-row 属性は grid-row-start と grid-row-end 属性の省略形属性です。
プロジェクトを配置するには、行番号を参照したり、"span" キーワードを使用してプロジェクトが跨る行数を定義できます：
例
"item1" を row-line 1 から始め、row-line 4 で終わります：
.item1 {
grid-row: 1 / 4;
}
例
"item1" を第 1 行から始め、2 行を覆います：
.item1 {
grid-row: 1 / span 2;
}
grid-area 属性
grid-area 属性は grid-row-start、grid-column-start、grid-row-end、grid-column-end 属性の省略形属性として使用できます。
例
"item8" を row-line 1 と column-line 2 から始め、row-line 5 と column line 6 で終わります：
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
例
"item8" を row-line 2 と column-line から始め、2行と3列を覆います：
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
名前付きグリッド項目
grid-area 属性もグリッド項目に名前を割り当てるために使用できます。
グリッドコンテナの grid-template-areas 属性を使用して名前付きのグリッド項目を参照します。
例
item1 の名前は "myArea" で、5列のグリッドレイアウトのすべての5列を覆います：
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
各行はグループ引用符（' '）で定義されます。
各行の列はグループ引用符内で定義され、スペースで区切られます。
注記：点は名前のないグリッドプロジェクトを表します。
例
"myArea" を5列のグリッドレイアウトの2列にわたって配置します（点は名前のないプロジェクトを表します）：
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
2行を定義するには、別のグループ引用符内で2行の列を定義してください：
例
"item1" を2列と2行にわたって配置するには：
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}
例
すべてのプロジェクトに名前をつけ、いつでも使用できるウェブページテンプレートを作成します：
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}
プロジェクトの順序
グリッドレイアウトを使用して、好きな場所にプロジェクトを配置できます。
HTMLコードの最初の項目は、グリッドの最初の項目として表示される必要はありません。
例
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
特定のスクリーンサイズの順序を変更するためにメディアクエリを使用することができます：
例
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 / span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 / span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
}
- 前のページ CSS グリッドコンテナ
- 次のページ CSS 例
