Specifying grid-template-columns using only percentages overrides box sizing

[jaclyntan]

When using CSS grid and specifying columns as percentages, it ignores box sizing
https://codepen.io/electrifried/pen/MzQPNO

Is this intentional? I couldn't find much on this issue but because I am used to using percentages with margins and padding I thought grid would be similar. I'm not sure if this affects grid-template-rows either.

I know you can write grid-template-columns: 50% 1fr instead of grid-template-columns: repeat(2,50%) but it's just force of habit...plus it feels nicer to me to just write repeat (2, 50%).

[PatrickBrady]

I think having 2 at 50% isn't a good idea because you'd come out to more than 100% depending on what the grid gap is. That's why the "fr" unit is preferred as far as I know.

…

Jaclyn Tan ***@***.***> Tuesday, November 27, 2018 11:50 PM When using CSS grid and specifying columns as percentages, it ignores box sizing https://codepen.io/electrifried/pen/MzQPNO Is this intentional? I couldn't find much on this issue but because I am used to using percentages with margins and padding I thought grid would be similar. I'm not sure if this affects grid-template-rows either. I know you can write |grid-template-columns: 50% 1fr| instead of |grid-template-columns: repeat(50%)| but it's just force of habit...plus it feels nicer to me to just write repeat(50%). — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#50>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADvhPJrBi5l5XmgHMhfMbVph1g3QU2sTks5uzkBQgaJpZM4Y3CkV>.

-- Sent from Postbox <https://www.postbox-inc.com/?utm_source=email&utm_medium=siglink&utm_campaign=reach>

[jaclyntan]

Oh I see, I didn't actually realise the grid-gap could affect the width of the entire grid.

Using 1fr makes sense I guess but it doesn't always mean the same thing as 50%, also depending on the content inside the grid.

The CSS columns spec has a column-gap property and that doesn't affect the total width as far as I know.

I know this is overall a minor issue but I feel like specifying 50% makes more sense in some contexts.

[PatrickBrady]

You're right that 1fr doesn't always mean the same thing. The fr unit applies to fr space, and its based on ratio. If you had 3 containers all set to 1fr then that would all get set to 33% of the free space minus the grid gap. If they were set to 33% you'd get a horizontal scroll. If you had them all set to 2fr you'd see no difference. If you had one of the 3 set to 2fr and the other two set to 2fr then that one would get twice the amount of free space as the other two. Of you had one set to 3fr then that one would get 3x the amount of the free space (minus the grid gap)... I hope I helped

…

On Nov 30, 2018, at 7:13 AM, Jaclyn Tan ***@***.***> wrote: Oh I see, I didn't actually realise the grid-gap could affect the width of the entire grid. Using 1fr makes sense I guess but it doesn't always mean the same thing as 50%, also depending on the content inside the grid. The CSS columns spec has a column-gap property and that doesn't affect the total width as far as I know. I know this is overall a minor issue but I feel like specifying 50% makes more sense in some contexts. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.