「Grid Layout を使いこなす」全6回です。
⇒ その１ 基本
⇒ その２ トラック、領域の値
⇒ その３ 基本以外のプロパティ（今回）
⇒ その４ ショートハンド
⇒ その５ IE 対応
⇒ その６ まとめ
これまで触れてきた基本となる5つのプロパティ一覧です。
| プロパティ | 役割 |
|---|---|
| display: grid | 親要素（コンテナ）で、コンテナの作成を指示 |
| grid-template-rows | 親要素（コンテナ）で、各行トラックの高さを指定 |
| grid-template-columns | 親要素（コンテナ）で、各列トラックの幅を指定 |
| grid-row | 子要素（アイテム）で、そのアイテムの行の領域を指定 |
| grid-column | 子要素（アイテム）で、そのアイテムの列の領域を指定 |
Grid Layout モジュールに含まれる、これ以外のプロパティをまとめます。
gap プロパティ
トラック間の隙間を定義するプロパティで、親要素（コンテナ）で指定します。
grid-row-gap ⇒ 行の間の隙間を指定
grid-column-gap ⇒ 列の間の隙間を指定
grid-row-gap: 3%;
grid-column-gap: 20px;
値には、px、em、%、normal（ブラウザに依存）などが指定できます。
grid プロパティには、calc() 関数も利用できます。
grid-row-gap: cal(20px + 10%);
＊ CSS の仕様書を読むと、当初は grid-gap プロパティで定義されていましたが、今は、この接頭辞なしの、gap に置き換えられています。
grid-row-gap ⇒ gap-row
grid-colomn-gap ⇒ gap-colomn
ですが、grid-gap を実装していて、gap を実装していないブラウザがあるため、接頭辞付きのプロパティを使用した方がいいようです。
grid-template-areas と grid-area の組み合わせ
grid-area を使って、アイテムと領域の名前を関係づけます。
この図のレイアウトを例にして、領域を指定する場合を見ていきます。
まず、コンテナの方で、各領域を指定します。（それぞれのアイテムに grid-column、grid-row で領域を指定する代わりとなります。）
.wrapper {
display: grid;
grid-template-areas: "head head" /* 1行目の1列目 1行目の2列目 */ "nav main" /* 2行目の1列目 2行目の2列目 */grid-template-rows: 200px 1fr;
grid-template-columns: 300px 1fr;
}
grid-area を使って、grid-template-areas で定義した領域の名前を、各アイテムと関連付けるクラスを作ります。
.head {
grid-area: head;
}
.nav {
grid-area: nav;
}
.main {
grid-area: main;
}
grid-auto-row, grid-auto-column
拡張したトラックの大きさを指定するプロパティです。
トラックの大きさは、grid-template-rows / grid-template-columns で指定しますが、アイテムがそこに収まらない場合も考えられます。例えば、セルに対して、アイテムの方が多すぎる、なんていう場合です。
また、コンテナにそもそも grid-template-rows / grid-template-columns を指定していない場合、行数、列数、大きさが不明ということもあります。
こういった場合に、grid-auto-rows / grid-auto-columns で、トラックの幅を指定します。コンテナに指定します。
grid-auto-row: minmax(20% 1fr);
grid-auto-column: 20px;
値には、長さの単位、%、fr、max-content、min-content、minmax()関数、auto（初期値）が指定できます。
grid-auto-flow
アイテムを配置する方向を指定するプロパティです。
アイテムに grid-row、 grid-column、grid-area を特に指定しない場合、アイテムは、1行目の左から右へ、2行目の左から右へ・・・と埋まっていきます。
これはデフォルトで、grid-auto-flow: row となっているからです。
《 アイテムの配置される順番（grid-row、 grid-column、grid-areaで指定がない場合）》
grid-auto-flow: row ⇒ 1行目の左から右へ、2行目の左から右へ・・・
grid-auto-flow: column ⇒ 1列目の上から下へ、2列目の上から下へ・・・
grid-auto-flow: dense ⇒ 空いているスペースをなるべく埋める
grid-auto-flow: row dense ⇒ 1行目の左から右へ、2行目の左から右へ・・・空いているスペースをなるべく埋める
grid-auto-flow: column dense ⇒ 1列目の上から下へ、2列目の上から下へ・・・空いているスペースをなるべく埋める
Grid Layout モジュール以外のプロパティ
Grid Layout モジュール以外のプロパティで、配置の指定によく利用するものをまとめます。
justify-content： コンテナに指定。グリッドの水平方向の配置
値： start（右揃え、デフォルト）, center（中央揃え）, end（左揃え）
align-content： コンテナに指定。グリッドの垂直方向の配置
値： start（上揃え、デフォルト）, center（中央揃え）, end（下揃え）
justify-item： コンテナに指定。全アイテムの水平方向の配置
値： start（右揃え、デフォルト）, center（中央揃え）, end（左揃え）
align-item：コンテナに指定。グリッドの垂直方向の配置
値： start（上揃え、デフォルト）, center（中央揃え）, end（下揃え）
justify-self： アイテムに指定。そのアイテムの水平方向の配置
値： start（右揃え、デフォルト）, center（中央揃え）, end（左揃え）
align-self：アイテムに指定。そのアイテムの垂直方向の配置
値： start（上揃え、デフォルト）, center（中央揃え）, end（下揃え）
order： アイテムに指定。並ぶ順番
値： 整数
View Comments (0)