The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › CSS Grid Layout 'fr' unit confusion
I am currently developing a site using CSS Grid Layout.
This is the page I am having trouble with: ‘https://test.joealden.com/about’
I have created a 3 column layout, and I want each column to take up the same width.
For this reason, I used the ‘fr’ unit. so the containers CSS is as following:
grid-template-columns: 1fr 1fr 1fr;
However, the columns are not the same size.
In chrome dev-tools, although it says that it is ‘1fr 1fr 1fr’, the computed values are not equal (For example, at one size, it was ‘414px 414px 540px’)
What am I doing wrong?
Or what possible styling conflict could cause this?
You have a fixed width on the 3rd column
AND there is a 3000+px slider in that column which is messing things up.
<div class="slick-track" data-reactid="36" style="opacity: 1; transform: translate3d(-540px, 0px, 0px); width: 3240px;">...