diff options
Diffstat (limited to 'src/components/gallery/gallery.vue')
| -rw-r--r-- | src/components/gallery/gallery.vue | 25 |
1 files changed, 21 insertions, 4 deletions
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index 65175366..424a15f1 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -10,9 +10,12 @@ :key="index" class="gallery-row" :style="rowStyle(row)" - :class="{ '-audio': row.audio, '-minimal': row.minimal }" + :class="{ '-audio': row.audio, '-minimal': row.minimal, '-grid': grid }" > - <div class="gallery-row-inner"> + <div + class="gallery-row-inner" + :class="{ '-grid': grid }" + > <attachment v-for="attachment in row.items" class="gallery-item" @@ -136,10 +139,9 @@ } .gallery-row { - + &.-grid, &.-minimal { height: auto; - .gallery-row-inner { position: relative; } @@ -156,6 +158,21 @@ flex-direction: row; flex-wrap: nowrap; align-content: stretch; + + &.-grid { + width: 100%; + height: auto; + position: relative; + display: grid; + grid-column-gap: 0.5em; + grid-row-gap: 0.5em; + grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); + + .gallery-item { + margin: 0; + height: 200px; + } + } } .gallery-item { |
