- 記事公開日
「display:grid」プロパティ一覧

「display:grid」でよく使うプロパティだけの一覧が欲しいの。
動きとか説明とか余計な情報は要らないんだけど・・・

了解です!
こちらになります↓
全体
justify-content:start; | 横方向・左揃え![]() |
justify-content:end; | 横方向の右揃え![]() |
justify-content:center; | 横方向の中央揃え![]() |
justify-content:space-between; | 左右の端に『余白なし』![]() |
justify-content:space-around; | 左右の端に『余白あり』![]() |
justify-content:space-evenly; | 均等余白![]() |
align-content:start; | 縦方向・上揃え![]() |
align-content:end; | 縦方向・下揃え![]() |
align-content:center; | 縦方向・中央揃え![]() |
列ごと
justify-items:start; | 横方向・左揃え![]() |
justify-items:end; | 横方向の右揃え![]() |
justify-items:center; | 横方向の中央揃え![]() |
行ごと
align-items:start; | 縦方向・上揃え![]() |
align-items:end; | 縦方向・下揃え![]() |
align-items:center; | 縦方向・中央揃え![]() |
個別
justify-self:start; | 横方向・左揃え![]() |
justify-self:end; | 横方向の右揃え![]() |
justify-self:center; | 横方向の中央揃え![]() |
align-self:start; | 縦方向・上揃え![]() |
align-self:end; | 縦方向・下揃え![]() |
align-self:center; | 縦方向・中央揃え![]() |