search

rachelandrew / gridbugs

A curated list of Grid interop issues
MIT License
1.18k stars 25 forks source link

Grid overflow doesn't fit #51

Open rdsilvalopes opened 5 years ago

rdsilvalopes commented 5 years ago

https://codepen.io/rdsilvalopes/pen/eXQjQZ

When I used the grid setting .menu {      grid-column: 1 / 3; <-------------

And the content .contento {      grid-column: 3 / -1; <-------------

And resizing it's overflowed

But, this is the only configuration that works using number 2. If you change the number it does not fit and always overflow to other box when you resize.

.menu {      grid-column: 1 / 2; <-------------

And the content .contento {      grid-column: 2 / -1; <-------------

grid-overflow

WebMechanic commented 4 years ago

That's expected behaviour if elements span multiple tracks. The word "Portfólio" defines the minimum content width of its element, not the spanning grid columns, which are all set to have the same flexible width of 1fr. To prevent spanning items like the menu from overlaping with their grid siblings you need to set their column width to "auto", "min-content" (or "max-content"). That's when they honor the (minimum) content width of the spanned items placed inside.

/* either of this works in your specific setup */
.container { grid-template-columns: auto auto repeat(10, 1fr); }
.container { grid-template-columns: min-content min-content repeat(10, 1fr); }
.container { grid-template-columns: max-content max-content repeat(10, 1fr); }

Because "Portfólio" is a single (unbreakable) word, both "min-content" and "max-content" give the same results here. If it were "Meu Portfólio" and you add hyphenation the results differ and "Contato" might define the width.

Not a bug & you can close this issue :)