Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Calculating gutter width for grid layout in SASS

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #175427
    Keenan Payne
    Participant

    Hello everybody!

    I am trying to create a mixin in SASS that is simple and easy-to-use for generating grids with and without gutters.

    My mixin works great except for when I introduce gutters to it. By adding the .gutters class to a row, each column (except for the last column) have a left margin of 2%. However, I do not know how to calculate the proper width for these columns, since that is something that has to change because of the gutters.

    Here is an example of my code running: http://codepen.io/anon/pen/hDqfp

    Here is the proper code that I need generated:

    .column-1 { width: 6.25%; }
    .column-2 { width: 12.5%; }
    .column-3 { width: 18.75%; }
    .column-4 { width: 25%; }
    .column-5 { width: 31.25%; }
    .column-6 { width: 37.5%; }
    .column-7 { width: 43.75%; }
    .column-8 { width: 50%; }
    .column-9 { width: 56.25%; }
    .column-10 { width: 62.5%; }
    .column-11 { width: 68.75%; }
    .column-12 { width: 75%; }
    .column-13 { width: 81.25%; }
    .column-14 { width: 87.5%; }
    .column-15 { width: 93.75%; }
    .column-16 { width: 100%; }
    
    .gutters .column-1 { width: 4.375%; }
    .gutters .column-2 { width: 10.75%; }
    .gutters .column-3 { width: 17.125%; }
    .gutters .column-4 { width: 23.5%; }
    .gutters .column-5 { width: 29.875%; }
    .gutters .column-6 { width: 36.25%; }
    .gutters .column-7 { width: 42.625%; }
    .gutters .column-8 { width: 49.0%; }
    .gutters .column-9 { width: 55.375%; }
    .gutters .column-10 { width: 61.75%; }
    .gutters .column-11 { width: 68.125%; }
    .gutters .column-12 { width: 74.5%; }
    .gutters .column-13 { width: 80.875%; }
    .gutters .column-14 { width: 87.25%; }
    .gutters .column-15 { width: 93.625%; }
    .gutters .column-16 { width: 100%; }
    

    However, as you can see, that is not happening because the equation in my mixin is incorrect. Can anyone please point me in the right direction, this is wrecking my brain…

    #175447
    Paulie_D
    Member
    #175492
    Keenan Payne
    Participant

    @MattDiMu Thank you so much for the help with that and for the link. I was really struggling with this and that’s just what I needed.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.