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

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #264351

    I am currently developing a site using CSS Grid Layout.

    This is the page I am having trouble with: ‘’

    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.


    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;">...
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.