CSS Gridの中でSlickを利用すると画像がとんでもなく大きくはみ出る


ずっと避けてきた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の可読性はかなり低いなぁ。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です