「display:flex」→「display:grid」に変えてみる。

f:id:Kawan0116:20210429001026p:plain

当サイトは、はてなブログを使っていて、元になるCSSの上に自作のCSSを上書きするという感じになっています。

ヘッダとフッタ、2カラム構成のレイアウトというのは残しています。

あとは、自分好みにCSSでデザインしていく形にしています。

display:flexを使っているみたい

2カラム構成ですが、「display:flex」を使っているみたい。

この点が何だか気に入らない(笑)。

僕、2カラムにする際は「display:grid」が好きなのです。

なので、「display:flex」→「display:grid」に変えました。

まぁ、お試しでしたので反映はさせませんけどね。

4時間もかかった

結論から言うと4時間ほどかかりました。

どうもレイアウトが崩れる・・・。カラム落ちする・・・。

「なんでやねん!」という形で色々と試してみると、こいつが邪魔していました。

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

上のコードはテキストを折り返さないモノになっています。

なので、上のを解除しました。

あとは、

display:grid;
grid-template-columns:1fr 200px;

1frと200pxはお好みで変えます。

これで全く問題なくなりました。

4時間もかかりましたが、とてもいい勉強になりました。

今後の制作で十分活かせるものとなりました。

1度分かってしまえば、15分程度で実装可能となりました。

危険だな

それにしても、

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

は危険です。

もし、レイアウトを大幅に変えるという方向になった場合、上のコードに十分気を付ける必要があるなと思ったのでした。

さいごに

そういう訳で、4時間もかけた割には変更しないというオチ。

ちょっと「display:flex」→「display:grid」に変えれるか試したかったのです。

これで変えることが出来るようになり、柔軟な対応が出来るようになりました。

とてもいい・・・。

まだ、サイトは完成ではありませんが、まぁ、ボチボチ完成を目指していきます。