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

普通のgrid

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

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

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

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

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なので線は含めない