Skip to content

Instantly share code, notes, and snippets.

@younes-dro
Created January 29, 2020 19:28
Show Gist options
  • Save younes-dro/8e952d5d16da874f3741b40387326c4f to your computer and use it in GitHub Desktop.
Save younes-dro/8e952d5d16da874f3741b40387326c4f to your computer and use it in GitHub Desktop.
Generate variable max-width for children based on loop
$columns: (
1: 100%,
2: 50%,
3: 33.33%,
4: 25%,
5: 20%,
6: 16.66%,
7: 14.28%,
8: 12.5%,
9: 11.11%
);
.gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%;
// Loops to enumerate the classes for gallery columns.
@for $i from 2 through 9 {
.gallery-columns-#{$i} & {
max-width: map-get( $columns, $i );
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment