# Image Layouts

Layouts for displaying sets of images.

## Grid

```astro
<section class="grid grid-cols-2 gap-6 md:grid-cols-3">
	<!-- Row -->
	<img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=1" />
	<img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=2" />
	<img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=3" />
	<!-- Row -->
	<img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=4" />
	<img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=5" />
	<img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=6" />
	<!-- Row -->
	<img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=7" />
	<img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=8" />
	<img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=9" />
</section>

```

## Quad

```astro
<section class="grid grid-cols-2 gap-4">
	<!-- Row -->
	<img class="h-64 w-64 bg-surface-500 rounded-container" src="https://picsum.photos/256/256?random=1" />
	<img class="h-64 w-64 bg-surface-500 rounded-container" src="https://picsum.photos/256/256?random=2" />
	<!-- Row -->
	<img class="h-64 w-64 bg-surface-500 rounded-container" src="https://picsum.photos/256/256?random=3" />
	<img class="h-64 w-64 bg-surface-500 rounded-container" src="https://picsum.photos/256/256?random=4" />
</section>

```

## Masonry

```astro
<section class="grid grid-cols-2 gap-4 md:grid-cols-4">
	<!-- Column -->
	<div class="grid gap-4">
		<img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/320?random=1" />
		<img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/120?random=2" />
		<img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/280?random=3" />
	</div>
	<!-- Column -->
	<div class="grid gap-4">
		<img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/300?random=4" />
		<img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/280?random=5" />
		<img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/140?random=6" />
	</div>
	<!-- Column -->
	<div class="grid gap-4">
		<img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/280?random=7" />
		<img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/320?random=8" />
		<img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/140?random=9" />
	</div>
	<!-- Column -->
	<div class="grid gap-4">
		<img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/320?random=10" />
		<img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/140?random=11" />
		<img class="bg-surface-500 rounded-container" src="https://picsum.photos/220/280?random=12" />
	</div>
</section>

```

## Featured

```astro
<section class="grid gap-4">
	<!-- Featured -->
	<header>
		<img class="h-auto max-w-full bg-surface-500 rounded-container" src="https://picsum.photos/960/512?random=1" />
	</header>
	<!-- Row -->
	<div class="grid grid-cols-5 gap-4">
		<img class="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=2" />
		<img class="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=3" />
		<img class="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=4" />
		<img class="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=5" />
		<img class="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=6" />
	</div>
</section>

```

## Attribution

Images courtesy of [Lorem Picsum](https://picsum.photos/). Markup and styles inspired by [Flowbite](https://flowbite.com/docs/components/gallery/#masonry-grid).