記事公開日

「display:grid」プロパティ一覧

お客さん

「display:grid」でよく使うプロパティだけの一覧が欲しいの。

動きとか説明とか余計な情報は要らないんだけど・・・

隊員1号

了解です!

こちらになります↓

全体

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;縦方向・中央揃え縦方向・中央揃え
この記事のURLをコピー

メールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

関連情報

運営者プロフィール
運営者のプロフィール画像
隊員1号

IT系フリーランスとして10年の経験を持つレスキュー隊。HTML・CSS・JS・PHPなど幅広いスキルを持つ。

詳しいプロフィール