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.