ずっと避けてきたGrid。
ついに着手。
良く分からないけど参考サイトを見つつ column rowを設定してその中に各要素を収める設定完了。
grid-column: 1/2;
grid-row: 2/3;
こんな感じで各divに設定をいれていく。
良し完成と思いつつプレビュするとSlickがとんでもないことに。
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(6,auto);
こんな感じで横2 縦6のGridを作っていて右側にSlick用のDivを配置しておりましたが、それだとだめで
display: grid;
grid-template-columns: repeat(2,minmax(0, 1fr));
grid-template-rows: repeat(6,auto);
こうする必要があり。
ちょっとまだ良く分かっていない。もっと勉強しないとだ。
レイアウトはかなり自由度が上がるけどCSSの可読性はかなり低いなぁ。