forked from mirror/_s
Use CSS grid for gallery styles (#1246)
Co-authored-by: Ismail El Korchi <ismail.elkorchi@gmail.com>
This commit is contained in:
parent
a9699ffb9b
commit
50ce93c7cd
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
35
style.css
35
style.css
|
@ -906,45 +906,46 @@ object {
|
|||
--------------------------------------------------------------*/
|
||||
.gallery {
|
||||
margin-bottom: 1.5em;
|
||||
display: grid;
|
||||
grid-gap: 1.5em;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gallery-columns-2 .gallery-item {
|
||||
max-width: 50%;
|
||||
.gallery-columns-2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.gallery-columns-3 .gallery-item {
|
||||
max-width: 33.33%;
|
||||
.gallery-columns-3 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.gallery-columns-4 .gallery-item {
|
||||
max-width: 25%;
|
||||
.gallery-columns-4 {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.gallery-columns-5 .gallery-item {
|
||||
max-width: 20%;
|
||||
.gallery-columns-5 {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
.gallery-columns-6 .gallery-item {
|
||||
max-width: 16.66%;
|
||||
.gallery-columns-6 {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
|
||||
.gallery-columns-7 .gallery-item {
|
||||
max-width: 14.28%;
|
||||
.gallery-columns-7 {
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
|
||||
.gallery-columns-8 .gallery-item {
|
||||
max-width: 12.5%;
|
||||
.gallery-columns-8 {
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
}
|
||||
|
||||
.gallery-columns-9 .gallery-item {
|
||||
max-width: 11.11%;
|
||||
.gallery-columns-9 {
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
}
|
||||
|
||||
.gallery-caption {
|
||||
|
|
Reference in New Issue