title: Is flexbox snapping to grid with text wrapping possible?
body: <p>So I like this, where it wraps but yet the boxes all align on both sides and fill the whole space.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
  &lt;style&gt;
  * {
    padding: 0px;
    margin: 0px;
    text-transform: none;
    font-style: normal;
  }
  
  p {
    display: flex;
    flex-wrap: wrap;
    width: 200px;
  }
  
  i {
    flex: 1;
    padding: 5px;
    margin: 2px;
    background: #ddd;
    text-align: center;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;
      &lt;i&gt;foo&lt;/i&gt;&lt;i&gt;hello&lt;/i&gt;&lt;i&gt;congratulations&lt;/i&gt;&lt;i&gt;forward&lt;/i&gt;&lt;i&gt;interesting&lt;/i&gt;&lt;i&gt;place&lt;/i&gt;&lt;i&gt;walk&lt;/i&gt;&lt;i&gt;to&lt;/i&gt;&lt;i&gt;anyplace&lt;/i&gt;&lt;i&gt;next&lt;/i&gt;&lt;i&gt;sophisticationism&lt;/i&gt;
    &lt;/p&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Using a mix of small and large words, it somehow figures out how to optimally lay them out so it fills the space completely.</p>
  
  <p>What I would like to do now is, instead of having each box be a dynamically width'd rectangle, I would like for the boxes to "snap to a grid" so to speak. That is, imagine there was a grid of squares that stretched across each row. Sort of like this (which I've <em>completely</em> hardcoded, just for the sake of demonstrating what it looks like. In reality this is what my question is about, how to make this automatic using FlexBox).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
  &lt;style&gt;
  * {
    padding: 0px;
    margin: 0px;
    text-transform: none;
    font-style: normal;
  }
  
  p {
    display: flex;
    flex-wrap: wrap;
    width: 220px;
  }
  
  i {
    width: 50px;
    height: 50px;
    padding: 5px;
    margin: 2px;
    background: #ddd;
    text-align: center;
  }
  
  .l {
    width: 114px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;
      &lt;i&gt;a&lt;/i&gt;&lt;i&gt;a&lt;/i&gt;&lt;i&gt;a&lt;/i&gt;&lt;i&gt;a&lt;/i&gt;&lt;i class='l'&gt;long&lt;/i&gt;&lt;i&gt;a&lt;/i&gt;&lt;i class='l'&gt;long&lt;/i&gt;&lt;i&gt;a&lt;/i&gt;&lt;i class='l'&gt;a&lt;/i&gt;&lt;i class='l'&gt;long&lt;/i&gt;&lt;i&gt;a&lt;/i&gt;&lt;i&gt;a&lt;/i&gt;&lt;i&gt;a&lt;/i&gt;&lt;i&gt;a&lt;/i&gt;&lt;i&gt;a&lt;/i&gt;&lt;i&gt;a&lt;/i&gt;&lt;i&gt;a&lt;/i&gt;
    &lt;/p&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So to rephrase, my question is how to cause <em>flowing</em> text (like the words in the images above) layout so (a) it fills each row, and (b) each box is a multiple of a square. That is, it snaps to the grid of a square, weather it's 1, 2, 3+ squares, rather than being 2.5 squares or 1.2345 squares or something. It always snaps to a whole block. It does this by first looking at the <em>longer</em> words, and calculating how many blocks it will take up. Then it stretches any shorter blocks (like the one letter "a" in the example above) so as to fill the blank space.</p>
  
  <p>Wondering how this could be done with FlexBox or otherwise with CSS.</p>