title: word-wrap in a CSS grid
body: <p><code>word-wrap: break-word</code> doesn't work in a grid.</p>
  
  <p><a href="https://stackoverflow.com/questions/1258416/word-wrap-in-an-html-table">For tables</a> there is <code>table-layout: fixed</code>, what is the equivalent for grids?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="background: #e3e3e3; width: 75%;"&gt;
  
   &lt;div style="word-wrap: break-word;"&gt;
     normaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldiv
   &lt;/div&gt;
   
   &lt;table&gt;
     &lt;tr&gt;&lt;td style="word-wrap: break-word;"&gt;
       badtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtable
     &lt;/td&gt;&lt;/tr&gt;
   &lt;/table&gt;
   
   &lt;table style="table-layout: fixed; width: 100%;"&gt;
     &lt;tr&gt;&lt;td style="word-wrap: break-word;"&gt;
       fixedtablefixedtablefixedtablefixedtablefixedtablefixedtablefixedtablefixedtablefixedtablefixedtablefixedtable
     &lt;/td&gt;&lt;/tr&gt;
   &lt;/table&gt;
   
   &lt;div style="display: grid;"&gt;
     &lt;div style="word-wrap: break-word;"&gt;
       griddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddiv
     &lt;/div&gt;
   &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>