MyグリッドCSSチートシート

普通のgrid

autoは中身のサイズに合わせる、frは分数
親要素の幅はclampで最小375px、最大1000px、中値50%指定

item
item
item
item
item
item

grid-columnとgrid-rowで範囲指定
ショートハンドで指定はrow/columnそれぞれ起点から縦/横/左上と右下の順
紙に書いて番号ふった方が設計しやすいかも
スマホは1カラムで親要素のgrid変更

grid-template-columns: 1fr;
      grid-template-rows: repeat(4, 1fr);
      column-gap: 0;
item1、1/1/2/2
sp 1/1/2/2/
item2、2/1/3/2
sp 2/1/3/3/
item3、1/2/3/3
sp 3/1/4/4/
item4、3/1/4/3
sp 4/1/5/5/

親要素にgrid-template-areas指定

grid-template-areas
itemA

grid-template-areas
itemB

grid-template-areas
itemC

grid-template-areas
itemD

grid-template-areas
itemF

grid-template-columnsのrepeat(auto-fill, minmax(100px, 1fr))

auto-fillは折り返す

item
item
item
item
item
item

grid-template-columnsのrepeat(auto-fit, minmax(calc((100% - 70px) / 6), 1fr))

auto-fitは折り返さないで伸縮

item
item
item
item
item
item

min()、max()、clump()の例

width max(15%, 100px)値
例)親要素の15%(max)と100pxで大きい値をとる

width min(100%, 355px)値
例)親要素の100%(min)と355pxで小さい値をとる

width clamp(355px, 50%, 600px)値
例)最小355pxから最大600pxの間は親要素の50%をとる
このボックス横幅は※border-boxなので線は含めない

グリッドレイアウト参考:
https://www.itti.jp/web-design/quick-css-grid/

グリッドレイアウト子要素参考:
https://coliss.com/articles/build-websites/operation/css/css-grid-cheat-sheets.html