CSSグリッドレイアウトでword-wrap: break-wordが効かなかったときの対処法

フレキシブルボックスレイアウト(flexbox)でも起きたことがあるのですが、CSSグリッドレイアウト(CSS Grid)でも単位にfrやminmaxで横幅などを指定していると、word-wrap: break-wordを指定しているのにもかかわらず、長い文字列がはみ出してしまうことがありました。

対処法としては、min-width: 0などとボックスに幅を指定してあげることで解決することができました。
自分がつかうサイトの場合は、ある程度どのくらいの長さの文字を扱うか分かるので必要もないのですが、誰がどのように使うか分からないサイトだといろいろ考えて設計しないといけないため大変だなぁと感じますね。
WordPressのテーマをつくっているときにテストデータを入れてみると、長い文字のタイトルがびよよ~んとブラウザからはみだしているのを見たりするとイラっときてしまいます(笑)