tabler/preview/pages/photogrid.astro

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Photo from '@ui/Photo.astro'
import photos from '@data/photos.json'

// fslightbox loads as a page library (no custom init script on this page).
---

<DefaultLayout title="Photogrid" pageHeader="Photogrid" pageMenu="extra.photogrid" pageLibs={['fslightbox']}>
  <div class="row g-2 g-md-3">
    <div class="col-lg-6">
      <div class="row g-2 g-md-3">
        <div class="col-12">
          <a data-fslightbox="gallery" href={`./static/photos/${photos[5].file}`}>
            <Photo photo={photos[5]} class="rounded-3 border" ratio="3x1" />
          </a>
        </div>
        <div class="col-6">
          <a data-fslightbox="gallery" href={`./static/photos/${photos[6].file}`}>
            <Photo photo={photos[6]} class="rounded-3 border" ratio="1x1" />
          </a>
        </div>
        <div class="col-6">
          <div class="row g-2 g-md-3">
            <div class="col-6">
              <a data-fslightbox="gallery" href={`./static/photos/${photos[7].file}`}>
                <Photo photo={photos[7]} class="rounded-3 border" ratio="1x1" />
              </a>
            </div>
            <div class="col-6">
              <a data-fslightbox="gallery" href={`./static/photos/${photos[8].file}`}>
                <Photo photo={photos[8]} class="rounded-3 border" ratio="1x1" />
              </a>
            </div>
            <div class="col-6">
              <a data-fslightbox="gallery" href={`./static/photos/${photos[9].file}`}>
                <Photo photo={photos[9]} class="rounded-3 border" ratio="1x1" />
              </a>
            </div>
            <div class="col-6">
              <a data-fslightbox="gallery" href={`./static/photos/${photos[10].file}`}>
                <Photo photo={photos[10]} class="rounded-3 border" ratio="1x1" />
              </a>
            </div>
          </div>
        </div>
        <div class="col-12">
          <a data-fslightbox="gallery" href={`./static/photos/${photos[16].file}`}>
            <Photo photo={photos[16]} class="rounded-3 border" ratio="4x1" />
          </a>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="row g-2 g-md-3">
        <div class="col-6">
          <div class="row g-2 g-md-3">
            <div class="col-6">
              <a data-fslightbox="gallery" href={`./static/photos/${photos[14].file}`}>
                <Photo photo={photos[14]} class="rounded-3 border" ratio="1x1" />
              </a>
            </div>
            <div class="col-6">
              <a data-fslightbox="gallery" href={`./static/photos/${photos[15].file}`}>
                <Photo photo={photos[15]} class="rounded-3 border" ratio="1x1" />
              </a>
            </div>
            <div class="col-6">
              <a data-fslightbox="gallery" href={`./static/photos/${photos[12].file}`}>
                <Photo photo={photos[12]} class="rounded-3 border" ratio="1x1" />
              </a>
            </div>
            <div class="col-6">
              <a data-fslightbox="gallery" href={`./static/photos/${photos[13].file}`}>
                <Photo photo={photos[13]} class="rounded-3 border" ratio="1x1" />
              </a>
            </div>
          </div>
        </div>
        <div class="col-6">
          <a data-fslightbox="gallery" href={`./static/photos/${photos[1].file}`}>
            <Photo photo={photos[1]} class="rounded-3 border" ratio="1x1" />
          </a>
        </div>
        <div class="col-12">
          <a data-fslightbox="gallery" href={`./static/photos/${photos[4].file}`}>
            <Photo photo={photos[4]} class="rounded-3 border" ratio="4x1" />
          </a>
        </div>
        <div class="col-12">
          <a data-fslightbox="gallery" href={`./static/photos/${photos[17].file}`}>
            <Photo photo={photos[17]} class="rounded-3 border" ratio="3x1" />
          </a>
        </div>
      </div>
    </div>
  </div>
</DefaultLayout>