How to recreate float layout using css grid?

Question

I have a layout with an image on the left and some text content on the right. It is laid out something like this:

.left {
  max-width: calc(100% - 150px);
  float: left;
}

img {
  width: 300px;
  max-width: 100%;
}

<div class="wrapper">
  <div class="left"><img src="https://i.sstatic.net/W6Sd8.png" /></div>
  <div class="right">Hello, I am Kitteh</div>
</div>

The basic idea is that the image can be up to 300px but must always leave at least 150px for the text content to the right. The text content will fill up as much space as possible - which will always be at least 150px left by the image.

My goal is to recreate this using CSS grid, but I am confused by how to use grid-template-columns to get the same behaviour. At the moment I have something like this:

.wrapper {
  display: grid;
  grid-template-columns: auto minmax(150px, auto);
}

img {
  width: 300px;
  max-width: 100%;
}

<div class="wrapper">
  <div class="left"><img src="https://i.sstatic.net/W6Sd8.png" /></div>
  <div class="right">Hello, I am Kitteh</div>
</div>

This respects the 150px minimum for the right hand column, but doesn't expand to meet the image. How can I get the grid layout to behave the same as the floats in my first example?

instead of minmax(150px, auto); add minmax(150px, 1fr); Use fr — Roland
– Roland, Commented Sep 12, 2018 at 17:34

Roland · Accepted Answer · 2018-09-12 18:19:31Z

1

instead of minmax(150px, auto); add minmax(150px, 1fr)

fr unit will take the space which is left.

fr unit is like persentages (%). But they do the hard work for us. For example if you want 4 columns same size you can do 25% 25% 25% 25%. Which will be similar to 1fr 1fr 1fr 1fr.

But if you have grid-gap: 20px you will notice a scroll will appear if you use persentages. Fortunately fr unit will take care of this and no scroll will appear.

Also grid-template-columns: 200px 1fr, to converted to persentages will be grid-template-columns: 200px calc(100% - 200px) so again fr unit is doing the hard work for us.

You can think the fr unit as free space since it is getting the available free space and doing some hard work for us.

Can get enough? Check out awesome css grid video series

Hope this will help you.

See it in action here

edited Sep 12, 2018 at 18:19

answered Sep 12, 2018 at 17:37

Roland

28.1k9 gold badges108 silver badges103 bronze badges

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

4 Comments

You Old Fool Over a year ago

that appears to be working. I've heard of fr but still unfamiliar with how it works - give me a moment to test this

You Old Fool Over a year ago

Thanks - I was having trouble due to an unrelated css rule - but got it sorted.

You Old Fool Over a year ago

thank you, I need to do more reading about this unit but yes that's helpful.

Roland Over a year ago

I think it would be helpful if you see this awesome video series. youtube.com/playlist?list=PLQkVA6z3dFvbnBJetfYDAF3-cG_ubgdZR

Collectives™ on Stack Overflow

How to recreate float layout using css grid?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related