CSS grid doesn't support word-wrap, overflow-wrap and hyphens properties

[danielCSS]

Long words don't break to the next line where template column widths are defined with fr units

Codepen #1: (word-wrap / overflow-wrap)

Codepen #2: (hyphens)

Workarounds:

1. use minmax() function instead of fr units. eg:

grid-template-columns: minmax(0, 1fr); instead of

grid-template-columns: 1fr;

2. use the word-break property
   For chrome: word-break: break-word is sufficient, but firefox requires word-break: break-all - which has the unwanted effect of breaking words in the middle.

For reference, see: https://stackoverflow.com/questions/51253050/css-grid-grows-over-100-width-with-fr-but-not-with-minmax

[marcing]

+1

Thanks for the workaround Daniel!