Floating elements in CSS Grid

There is actually one solution, use:

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

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

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.