●グリッド（grid）とは？
列と行を定義する水平線と垂直線が方眼状になったもの
要素をグリッドの行と列の中に配置する
グリッド – grid
列 – column
行 – row
行と列の間（ギャップ）gap
●コンテナー（container）
要素にdisplay:gridを指定するとコンテナー内の子要素全てがグリッドアイテムになる
全体の領域（赤いで囲った部分）がグリッドコンテナーとなります
●トラック（Track）
グリッド内の２本の線に囲まれた領域
以下のプロパティで指定することができる
列）grid-template-columns
行）grid-template-rows
トラックサイズは、ピクセル単位を使う固定トラックサイズと
パーセント等を使う可変トラックサイズがある
オレンジで囲た部分がトラックとなります
●エリア（Area）
セルの縦横に広がった領域
オレンジの部分がエリアとなります
●単位fr
例）grid-template-columns: 1fr 2fr 1fr;
1frの１は係数で、1fr 2fr 1frの３っの要素は４分割された列のうち１，２，１の比率でサイズが与えられる
grid-template-columns: 150px 1fr 2fr;
固定幅との混同では、固定幅の残りのサイズが振り分けられる
●repeat()
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
では逆にわかりずらいので
grid-template-columns: repeat(5, 1fr);
で記述できる
一部にも使え
grid-template-columns: 20px repeat(6, 1fr) 20px;
でも可能
反復パターンも使え
grid-template-columns: repeat(5, 1fr 2fr);
5回1fr 2fr のパターンを続ける
●minmax()
最少値と最大値を指定する
grid-auto-rows: minmax(100px, auto);
で最少100px最大はautoになる
この場合は内容物が100pxを超えた場合に引き伸ばされる
●グリッドアイテムのコンテナー内での配置
justify-items:
justify-content:
align-items:
align-content:
●アイテム間の隙間（gap)を設定
grid-row-gap: 行間のgap
grid-coumn-gap: 列間のgap
grid-gap: 10px; の場合、行と列のgapとなる
●auto-fit と auto-fill
grid-template-column:または、grid-template-rowにおいて列または行数をコンテナーサイズにおいて変動させる
具体的にはrepeat(auto-fill,100px)等として使用する
auto-fit とauto-fill の違いは、グリッドコンテナー内にアイテムを配置する際、コンテナー内に空白が出来た場合の処理が異なる
auto-fit は空白をそのまま空白として処理を行う
auto-fillは、空白が出来ると空のアイテムとして処理をする
ここまでは、コンテナー内のグリッドアイテム全体にたいするプロパティでした
ここからは、各々のグリッドアイテムを設定するためのプロパティです
●グリッド線に対するアイテムの配置
グリッド線を指定してグリッドトラックを指定する場合、線の番号を指定する
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
上記の一括指定
grid-column: 1 / 4;
grid-row: 1 / 3;
さらにエリアで指定する場合は
grid-area: 1 / 1 / 3 / 4 ;
負の数も使える
最終線を-1として負の数で指定できる
上記の場合column 4 と -1 が同じになる
また、グリッドトラックのサイズ指定でspanが使える
例えば、グリッドトラックの幅をグリッド３個分使用する場合
grid-area: 1/ 1 / span 3 / span 2;
他にも以下のプロパティで配置を指定できる
justify-self:center;
align-self: center;
place-self: start center;
●grid-template-areas
名前付きのグリッドを領域に指定する
grid-template-aeras:
“A A A”
“B C C”
“B C C”
“D D D”;
さらにサイズ指定で、rowとcolumnを指定する
grid-template-rows:1fr 1fr 1fr 1fr;
grid-template-columns:1fr 1fr 1fr;
上記を一括指定すると
grid-template:
“A A A” 1fr
“B C C” 1fr
“B C C” 1fr
“D D D” 1fr
/ 1fr 1fr 1fr;
横の1frはrowサイズで下の1frはcolumnサイズになります
上記の領域していにグリッドアイテムを関連付けます
グリッドアイテムでは上記のアリアの名前を指定します
.item01 {
grid-area: A;
}
.item02 {
grid-area: B;
}
.item03 {
grid-area: C;
}
.item04 {
grid-area: D;
}
grid-template-aerasに付きましたはまたの機会に詳細をご紹介出来たらと思います
それでは今回はこれまでです
コメント