Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Grid Layout Flexible Sized Grids Introducing fr, a Flexible CSS Length Unit

Alejandro Narvaja
PLUS
Alejandro Narvaja
Courses Plus Student 7,340 Points

Difference between 'fr' unit and 'auto' value on grid item.

Hello, I want to know the difference between 'fr' unit and 'auto'. I understand that 'auto' value has the size of the content, and 'fr' a fraction of space. But, in this example:

.wrapper {
  display: grid;
  grid-template-columns: auto auto 200px;
}

The size of the first and second columns is as wide as the available space, not so when I specify instead of px, specify in fr. Why is that?

Codepen here: https://codepen.io/alejuss/pen/pWPaXw?editors=0100

Fr unit takes available space, in this case auto auto 200px is the same as 1fr 1fr 200px but you can set up 2fr 1fr 200px so the first column will take twice more space than second one.

2 Answers

nico dev
nico dev
20,364 Points

I think I know what you mean, Alejandro Narvaja,

Checking your Codepen, seems you're comparing this:

.wrapper {
  display: grid;
  grid-template-columns: auto auto 200px;
}

... with this:

.wrapper {
  display: grid;
  grid-template-columns: auto auto 1fr;
}

... and wondering about why the auto is all "compacted" ( |o| How do you even call that otherwise?) in the second one.

Well, IMHO that is because what the browser does under the hood is, in the following order:

  1. Look for any fix unit (I don't know if fix is the actual word, but meaning pixels, ems, etc.)

  2. Look for fr units.

  3. Look for anything else.

Since the browser found a grid item of 1fr, it will allow such item to take all available space (that is 100% of the container), unless something else appears on that track.

When the auto thing appears, it is only assigned, so to say it, enough space to exist (with its content, currently just a number). Example: try writing some text (no need to add tags) inside the div 1 and you'll see what I mean.

In brief: the fr unit takes precedence over the auto in the available space remaining.

Hope that clears things up a bit, but otherwise feel free to follow it up here.

Alejandro Narvaja
Alejandro Narvaja
Courses Plus Student 7,340 Points

Hey Nico, thanks for you detailed answer. Indeed, it happens as you say, and I too was confused to believe that 'auto' occupies what occupies its content, and according to spec no: https://www.w3.org/TR/css-grid-1/#valdef-grid-template-columns-auto

Regards!

Alejandro Narvaja
PLUS
Alejandro Narvaja
Courses Plus Student 7,340 Points

Mm, is not what I asked but thanks!, I do not want one to lower more than the other, I want to understand why 'auto' sometimes occupy the size of its content and other available space.