CODEWITHSUNDEEP
csscss-grid
Rudie
Rudie

Reputation: 53821

CSS Grids auto (rest) size doesn't work for me

I'm looking into CSS Grids and I've come across something weird. I want 3 columns: 1 and 3 are 150px wide, and 2 is the rest. That should be possible, I thought, but this didn't work:

grid-template-columns: 150px auto 150px;

So I tried this, and that does work, but is silly:

grid-template-columns: 150px calc(100% - 300px) 150px;

And then I came across this example: http://gridbyexample.com/examples/code/layout1.html which uses this to make the content column auto size:

grid-template-columns: 200px 40px auto 40px 200px;

That's what I did! And their example works, and mine doesn't!?

My example fiddle: http://jsfiddle.net/rudiedirkx/w5xho67w/3/ (3 columns trigger if the screen >= 700px).

I must be doing something stupid, but I can't find the difference...

Not it:

Upvotes: 1

Views: 626

Answers (1)

Emil
Emil

Reputation: 2059

What you are looking for is the fractional units – set the middle column to be 1fr, meaning that it will take up 1/1 of the remaining space when the two other columns are accounted for. It works (basically) like a flexbox flex unit with a flex basis: 0.

grid-template-columns: 150px 1fr 150px;

By contrast, the auto value will size according to content, so an empty middle column (for example) will not take up any space.

I've started writing a series on how the Grid Layout Module works, there is a part on sizing grid tracks (which may be helpful) in there. :-)

Upvotes: 1

Related Questions