Search code examples
csscss-floatcss-grid

Floating elements in CSS Grid

I'm currently working on my first page where I want to use CSS grid display: grid.

It works very well, but I come across a small problem with an element that I want float classically - text floats around an image, a quote etc.

I simply gave an element a float: left and to my surprise, the float is completely ignored. The element remains as a full "grid-row-item".

Short code example:

main {
  display: grid;
  grid-template-columns: 5% 5% 1fr 5% 5%;
}

main > * {
  grid-column: 3;
}

blockquote {
  grid-column: 2 / -2;
}

blockquote.float-left {
  grid-column: 3;
  float: left;
}

For a larger example, I've created a Codepen.

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?

Thank you in advance! :)

Codepen-Link:

https://codepen.io/anon/pen/GQWPWX

Solution

  • You can't float grid items. Doing so would interfere with the grid layout completely.

    If you want to float elements, either remove them from the grid layout, assign display: grid to some other intermediate element, or don't use grid layout.