CSS Grid Layout 'fr' unit confusion

[me2]

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:

display: grid;
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?

Many thanks.

[Paulie_D]

You have a fixed width on the 3rd column

.cARKju {
     width: 30rem; 
}

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;">...

[Author]

Posts