CSSメモ grid
display: grid
要素をグリッドコンテナに指定することにより、子要素をグリッドレイアウトで配置できるようになる。
grid-template-columns:repeat(3, 1fr);
grid-template-columns：1fr 1fr 1fr；と同じ意味になる。
repeat（繰り返す回数、繰り返す値）
この記述では、要素を3列に分け、各列がコンテナ内の利用可能なスペースを均等に占めるデザインを作成
・repeat(3, 1fr): 3列を作成し、それぞれの列の幅を均等にする。
・3: 列の数を3列にすることを意味する。
・1fr: 「フラクションユニット」の略で、利用可能な空間を均等に分割する単位。ここでは、各列が利用可能なスペースを均等に1単位ずつ占める。
gap
余白はgapで設定する
・row-gap で列の余白
・column-gapで行の余白
をそれぞれ指定、gapのみで列・行同じ幅をできる
place-contentプロパティとは
place-contentプロパティは、
①justify-contentプロパティ：行列の横方向（インライン軸）の配置を制御
②align-contentプロパティ：行列の縦方向（ブロック軸）の配置を制御
この2つのプロパティのショートハンド。
一つの要素にのみ効く
center: 中央
start: 先頭側
end: 末尾側
left: 左側
right: 右側
space-between: 均等配置
space-around: 均等配置
space-evenly: 均等配置
place-content: center;と指定すれば、行列自体の配置を中央にできる。
place-itemsプロパティとは
place-itemsプロパティは、
①justify-itemsプロパティ：横方向（インライン軸）のセルの位置を制御
②align-itemsプロパティ：縦方向（ブロック軸）のセルの位置を制御
この2つのプロパティのショートハンド。
複数の要素に効く
center: 中央
start: 先頭側
end: 末尾側
left: 左側
right: 右側
baseline: ベースライン
stretch: 引き伸ばされる
place-contentとplace-itemsプロパティを同時に使うことで、行列全体と行列内のアイテムを中央揃えできる。
この記事が気に入ったらサポートをしてみませんか？