Grid
<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
<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
<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
<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 . Markup and styles inspired by Flowbite .