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

Arvis Iljins · Accepted Answer · 2020-11-18 11:44:54Z

30

There is actually one solution, use:

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

answered Nov 18, 2020 at 11:44

Arvis Iljins

4155 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

niiyeboah Over a year ago

When I looked this up, I was aware you cannot float in a grid but I did not know what else to call it. This answer is exactly what I was looking for :)

Kalle H. Väravas Over a year ago

To get the full float effect, I added position: absolute; which worked miracles.

Michael Benjamin · Accepted Answer · 2018-02-11 17:12:43Z

6

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

edited Feb 11, 2018 at 17:12

answered Feb 11, 2018 at 16:59

Michael Benjamin

376k110 gold badges616 silver badges737 bronze badges

Comments

BoltClock · Accepted Answer · 2018-02-10 15:18:39Z

5

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.

answered Feb 10, 2018 at 15:18

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

1 Comment

Max Over a year ago

Thanks @BoltClock for the quick answer! I've already thought something like that. A possibility for a float at this point would make sense in my point of view - or better actually be "the origin" of it. But if it is not intended, other options must be found as a solution. :) Thanks again!

Anthony Swanink · Accepted Answer · 2021-12-31 15:08:46Z

It is possible to get the effect you want but it does involve putting in a little extra mark-up. Since the grid affects only the immediate child elements you can put the content you want floated (image, blockquote etc) and the text you wanted to flow around it into a separate div nested inside the container where display:grid is applied.

For example:

<div class="playerinfo">
    <div class="content">
        <img class="floatleft" src="images/kane-williamson-sml.jpg" alt="Kane Williamson">
        <p> Kane Stuart Williamson (born 8 August 1990) is a professional cricketer from New Zealand who currently plays as a batsman for Northern Districts in New Zealand domestic cricket, the Sunrisers Hyderabad in theIPL, and New Zealand internationally. He made his first-class debut in December 2007 and his IPL debut in 2015.[1] He made his U-19 debut against the touring Indian U-19 team in 2007 and was named captain of the New Zealand U-19 team for the 2008 U-19 Cricket World Cup. Williamson also represented New Zealand at the ICC Cricket World Cup 2011 hosted by Subcontinental nations and the ICC Cricket World Cup 2015 hosted by New Zealand and Australia. On 14 August 2013, Williamson signed for Yorkshire for the rest of the English county season. On February 16 2015, Sunrisers Hyderabad signed Williamson in the IPL for US$96,500.</p>
    </div>
</div>

Using this CSS works well.

.playerinfo{
    display: grid;
}
    
.floatleft {
    float: left;
    padding-right: 5px;
    padding-bottom: 1px;
}

Collectives™ on Stack Overflow

Floating elements in CSS Grid

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related