tabler/preview/pages/photogrid.html

---
title: Photogrid
page-header: Photogrid
page-menu: extra.photogrid
page-libs: [fslightbox]
layout: default
permalink: photogrid.html
---

{% 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="{{ page | relative }}/static/photos/{{ 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="{{ page | relative }}/static/photos/{{ 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="{{ page | relative }}/static/photos/{{ 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="{{ page | relative }}/static/photos/{{ 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="{{ page | relative }}/static/photos/{{ 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="{{ page | relative }}/static/photos/{{ 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="{{ page | relative }}/static/photos/{{ 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="{{ page | relative }}/static/photos/{{ 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="{{ page | relative }}/static/photos/{{ 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="{{ page | relative }}/static/photos/{{ 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="{{ page | relative }}/static/photos/{{ 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="{{ page | relative }}/static/photos/{{ 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="{{ page | relative }}/static/photos/{{ 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="{{ page | relative }}/static/photos/{{ photos[17].file }}">
					{% include "ui/photo.html" id=17 class="rounded-3 border" ratio="3x1" %}
				</a>
			</div>
		</div>
	</div>
</div>