title: Floating elements in CSS Grid
body: <p>I'm currently working on my first page where I want to use CSS grid <code>display: grid</code>.</p>
  
  <p>It works very well, but I come across a small problem with an element that I want <code>float</code> classically - text floats around an image, a quote etc.</p>
  
  <p>I simply gave an element a <code>float: left</code> and to my surprise, the <code>float</code> is completely ignored. The element remains as a full "grid-row-item".</p>
  
  <p><strong>Short code example:</strong></p>
  
  <pre><code>main {
    display: grid;
    grid-template-columns: 5% 5% 1fr 5% 5%;
  }
  
  main &gt; * {
    grid-column: 3;
  }
  
  blockquote {
    grid-column: 2 / -2;
  }
  
  blockquote.float-left {
    grid-column: 3;
    float: left;
  }
  </code></pre>
  
  <p><em>For a larger example, I've created a <a href="https://codepen.io/anon/pen/GQWPWX" rel="noreferrer">Codepen</a>.</em></p>
  
  <p>Unfortunately, I have not found anything about this, so my questions are: Has anyone a solution for this? Have I overlooked something? Or maybe that's not possible yet?</p>
  
  <p>Thank you in advance! :)</p>
  
  <p><strong>Codepen-Link:</strong></p>
  
  <p><a href="https://codepen.io/anon/pen/GQWPWX" rel="noreferrer">https://codepen.io/anon/pen/GQWPWX</a></p>