Floating elements in CSS Grid

Question

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

Answer 1

There is actually one solution, use:

float: left; in grid works as => justify-self: start;
float: right; in grid works as => justify-self: end;

Answer 2

Floats are respected on grid containers, but they are completely ignored on grid items.

This behavior is defined in the CSS Grid spec in this section:

• https://www.w3.org/TR/css-grid-1/#grid-containers

The problem has been discussed here, but has no solution yet:

• Text not wrapping in CSS Grid