どうも山崎レモンサワーです。
今日もサイト制作でGridレイアウトやFlexboxをはじめとしたCSS3の便利さをかみしめてます。
今日は制作の途中で
Gridレイアウトを利用したのですが
grid-template-columnsを1fr 1fr 1frと
やっているのに等間隔にならず幅が押し出させる現象が出たので
その原因を書いておきます。
結論から・・・その原因は長い英文です
デフォルトのCSS設定では長い英文は単語の途中で改行されないのです。
単語の途中でも英文を折り返すようにしたら解決。
URLなど長い英文テキストが表示されている要素に対して
word-break: break-all;
を指定するだけです。
↓
ちなみにこの英文が折り返しされないことによるレイアウト崩れはこのGridやFlexbox問わず、
Tableでもなんでも、かなり頻繁に出てきます。
正直、共通リセットスタイルシートに全要素
word-break: break-all;
を適用しておくのもいいんじゃないですかね。
関係ないですけど、自分は全要素に
*{
box-sizing: border-box;
}
は指定するようにしてます。
超絶はかどります。
