Skip to content

Instantly share code, notes, and snippets.

@erikyo
Last active September 28, 2019 14:50
Show Gist options
  • Save erikyo/09023fb7fd76982adc4393a6738a2c91 to your computer and use it in GitHub Desktop.
Save erikyo/09023fb7fd76982adc4393a6738a2c91 to your computer and use it in GitHub Desktop.
SASS item width calcs for Masonry grid__col-sizer grid__gutter-sizer
$gutter_size: 3%;
$number_of_columns: 3;
$total_gutter_space: ( $number_of_columns - 1 ) * $gutter_size;
.grid__item,
.grid__col-sizer {
width: calc( ( 100% - #{$total_gutter_space} ) / #{$number_of_columns} );
}
.grid__gutter-sizer {
width: $gutter_size;
}
.grid__item.double {
width: calc( ( ( ( 100% - #{$total_gutter_space} ) / #{$number_of_columns} ) * 2 ) + #{$gutter_size} );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment