search

rachelandrew / cssgrid-ama

Ask me anything about CSS Grid Layout
328 stars 12 forks source link

css grid + slick slider problem with fr unit #64

Closed davezeli closed 7 years ago

davezeli commented 7 years ago

Hi Rachel,

I created a little test case for my problem: https://jsfiddle.net/gj1g1z0q/ I'm trying to understand the new CSS Grid and so far, it's great. But I ran into a problem the other day with the "fr" unit. (in Firefox and Chrome)

For my test case, I used the "Example 1" on http://gridbyexample.com and added the markup for the slider in box B to show me 3 pictures and I want to slide only one picture at the time whenever I click the next/previous button.

It doesn't work if I use the fr unit, this breaks the box B:

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

However, I found out it works as long as box B has a fixed width or percentage, for example:

grid-template-columns: 100px 1400px 100px; grid-template-columns: 100px calc(100% - 200px) 100px;

Do you (or anyone else) have any idea why the fr unit is not working here? I'm not sure if that is a css grid problem, a browser problem or plugin problem? The reason it works with pixels and percantages makes me believe it's a browser problem... but well, maybe I'm wrong...

Thank you very much. :)

rachelandrew commented 7 years ago

The JavaScript is giving the box a width of 5888 pixels. So that is what is making it too wide. So this is an issue with your slider script when used in this context.

The fr unit assigns available space. You don't have any as you have something in that track which is pushing it wide. Here is a demo with no JavaScript: http://codepen.io/rachelandrew/pen/LyEzym

davezeli commented 7 years ago

Thank you for your quick answer :)