tabler/preview/photogrid.html

---
title: Photogrid
page-header: Photogrid
menu: extra.photogrid
libs: fslightbox
---

{% capture svg %}
{% include ui/svg.html width=640 height=480 border=true %}
{% endcapture %}

<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="{{ site.base }}/static/photos/{{ site.data.photos[5].file }}">
					{% include ui/photo.html id=5 class="rounded-3 border" ratio="3x1" %}
				</a>
			</div>
			<div class="col-6">
				<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[6].file }}">
					{% include ui/photo.html id=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="{{ site.base }}/static/photos/{{ site.data.photos[7].file }}">
							{% include ui/photo.html id=7 class="rounded-3 border" ratio="1x1" %}
						</a>
					</div>
					<div class="col-6">
						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[8].file }}">
							{% include ui/photo.html id=8 class="rounded-3 border" ratio="1x1" %}
						</a>
					</div>
					<div class="col-6">
						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[9].file }}">
							{% include ui/photo.html id=9 class="rounded-3 border" ratio="1x1" %}
						</a>
					</div>
					<div class="col-6">
						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[10].file }}">
							{% include ui/photo.html id=10 class="rounded-3 border" ratio="1x1" %}
						</a>
					</div>
				</div>
			</div>
			<div class="col-12">
				<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[16].file }}">
					{% include ui/photo.html id=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="{{ site.base }}/static/photos/{{ site.data.photos[14].file }}">
							{% include ui/photo.html id=14 class="rounded-3 border" ratio="1x1" %}
						</a>
					</div>
					<div class="col-6">
						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[15].file }}">
							{% include ui/photo.html id=15 class="rounded-3 border" ratio="1x1" %}
						</a>
					</div>
					<div class="col-6">
						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[12].file }}">
							{% include ui/photo.html id=12 class="rounded-3 border" ratio="1x1" %}
						</a>
					</div>
					<div class="col-6">
						<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[13].file }}">
							{% include ui/photo.html id=13 class="rounded-3 border" ratio="1x1" %}
						</a>
					</div>
				</div>
			</div>
			<div class="col-6">
				<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[1].file }}">
					{% include ui/photo.html id=1 class="rounded-3 border" ratio="1x1" %}
				</a>
			</div>
			<div class="col-12">
				<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[4].file }}">
					{% include ui/photo.html id=4 class="rounded-3 border" ratio="4x1" %}
				</a>
			</div>
			<div class="col-12">
				<a data-fslightbox="gallery" href="{{ site.base }}/static/photos/{{ site.data.photos[17].file }}">
					{% include ui/photo.html id=17 class="rounded-3 border" ratio="3x1" %}
				</a>
			</div>
		</div>
	</div>
</div>