ドットインストールCSS グリッドレイアウト編です
要点だけまとめてみたので、後で振り返り用としておきます
グリッドレイアウトとは
マス目に要素を配置していくことで、複雑なレイアウトでも簡単に組むことが出来る
※グリッド = 格子状のこと
比較的新しい技術
ブラウザの対応状況は caniuse.com で調べられる
グリッドの格子の設定
列の幅を列挙
行の幅を列挙
デフォルトだと左上から➜に流れるようにマス目が設定される。
fraction(1fr)
指定した後の残った余白を割り当てることができる
2fr, 1fr と割り当てると余った余白を2:1で割り当てることができる
gap
グリッド間の余白を作成
列方向と行方向で別々の余白を設定したい場合、縦➜横(列間➜行間)の順に記述する
repeat()
repeat(数, 幅)
数の部分を親要素の幅に入る限りと言った指定にしたい場合
auto-fill
ブラウザの幅に合わせて数が変化する
好きな場所に配置する場合
マス目の線と線が交わるところに配置する といった指定をする
この線を「グリッドライン」と呼ぶ
グリッドラインに名前を付ける
target-start target-end -> target に省略出来る
要素がどこから並べられるかの操作
grid-auto-flow
dense
余った余白部分に要素を詰められる
直感的に操作する
grid-template-areas
１文字ずつ指定すると分かりやすいか(色の頭文字など)
(.)で配置したくない場所を指定出来る
配置する領域は四角になってないといけない
飛び石になっていると全てが壊れてしまう
領域内でのグリッドの設定
グリッド全体を揃えるプロパティ
justify-content (列方向の揃え)
align-content (行方向の揃え)
グリッド内で要素を揃えるプロパティ
justify-items (列方向の揃え)
align-items (行方向の揃え)
グリッド内の個々のマス目に対して制御するプロパティ
justify-self (列方向の揃え)
align-self(行方向の揃え)
↧