rayelliott
/
_s
Archived
forked from mirror/_s
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
sass/media/_galleries.scss
View File

@ -1,19 +1,20 @@
.gallery { .gallery {
margin-bottom: 1.5em; margin-bottom: 1.5em;
display: grid;
grid-gap: 1.5em;
} }
.gallery-item { .gallery-item {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
vertical-align: top;
width: 100%; width: 100%;
}
// Loops to enumerate the classes for gallery columns. // Loops to enumerate the classes for gallery columns.
@for $i from 2 through 9 { @for $i from 2 through 9 {
.gallery-columns-#{$i} & { .gallery-columns-#{$i} {
max-width: map-get($columns, $i); grid-template-columns: repeat($i, 1fr);
}
} }
} }

35
style.css
View File

@ -906,45 +906,46 @@ object {
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.gallery { .gallery {
margin-bottom: 1.5em; margin-bottom: 1.5em;
display: grid;
grid-gap: 1.5em;
} }
.gallery-item { .gallery-item {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
vertical-align: top;
width: 100%; width: 100%;
} }
.gallery-columns-2 .gallery-item { .gallery-columns-2 {
max-width: 50%; grid-template-columns: repeat(2, 1fr);
} }
.gallery-columns-3 .gallery-item { .gallery-columns-3 {
max-width: 33.33%; grid-template-columns: repeat(3, 1fr);
} }
.gallery-columns-4 .gallery-item { .gallery-columns-4 {
max-width: 25%; grid-template-columns: repeat(4, 1fr);
} }
.gallery-columns-5 .gallery-item { .gallery-columns-5 {
max-width: 20%; grid-template-columns: repeat(5, 1fr);
} }
.gallery-columns-6 .gallery-item { .gallery-columns-6 {
max-width: 16.66%; grid-template-columns: repeat(6, 1fr);
} }
.gallery-columns-7 .gallery-item { .gallery-columns-7 {
max-width: 14.28%; grid-template-columns: repeat(7, 1fr);
} }
.gallery-columns-8 .gallery-item { .gallery-columns-8 {
max-width: 12.5%; grid-template-columns: repeat(8, 1fr);
} }
.gallery-columns-9 .gallery-item { .gallery-columns-9 {
max-width: 11.11%; grid-template-columns: repeat(9, 1fr);
} }
.gallery-caption { .gallery-caption {