Skip to content

Instantly share code, notes, and snippets.

@leo-isso
Last active October 25, 2018 17:33
Show Gist options
  • Save leo-isso/fa32b86b9b49e6ac81d7cae85f56cf11 to your computer and use it in GitHub Desktop.
Save leo-isso/fa32b86b9b49e6ac81d7cae85f56cf11 to your computer and use it in GitHub Desktop.
Dynamic grid width calc for SASS.
$gutter: 20%
=columns($ac, $tc: 12, $gp: $gutter)
// * $cw - column width
// * $tc - total columns
// * $ac - actual column (how many columns)
// * $oc - one column (width)
// * $tw - total width
$tw: 100%
$oc: $tw / $tc
$cw: $oc * $ac
// * $gp - gutter percentual (relative to 1 column width)
// * $gt - gutter total
$gt: $oc * $gp / $tw
// * $fc - final column (width)
$fc: $cw - $gt
// * $gd - gutter distributtion
$gd: $gt / $tc * $ac
// * $rc - redistributted collumn
$rc: $fc + $gd
width: $rc
&.left-offset
margin-left: $gt
&.right-offset
margin-right: $gt
&:first-child
margin-left: 0
&:last-child
width: $cw
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment