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

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.