Use CSS grid for gallery styles (#1246)

Co-authored-by: Ismail El Korchi <ismail.elkorchi@gmail.com>
This commit is contained in:
Sajedeh Gooklani 2020-05-04 02:26:48 +03:00 committed by GitHub
parent a9699ffb9b
commit 50ce93c7cd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 23 deletions

View file

@ -1,19 +1,20 @@
.gallery {
margin-bottom: 1.5em;
display: grid;
grid-gap: 1.5em;
}
.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 {
// Loops to enumerate the classes for gallery columns.
@for $i from 2 through 9 {
.gallery-columns-#{$i} & {
max-width: map-get($columns, $i);
}
.gallery-columns-#{$i} {
grid-template-columns: repeat($i, 1fr);
}
}