Image Layouts

Grid

tsx

export default function Grid() {
	return (
		<section className="grid grid-cols-2 gap-6 md:grid-cols-3">
			{/* Row */}
			<img className="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=1" alt="" />
			<img className="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=2" alt="" />
			<img className="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=3" alt="" />
			{/* Row */}
			<img className="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=4" alt="" />
			<img className="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=5" alt="" />
			<img className="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=6" alt="" />
			{/* Row */}
			<img className="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=7" alt="" />
			<img className="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=8" alt="" />
			<img className="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=9" alt="" />
		</section>
	);
}

svelte

<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" alt="" />
	<img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=2" alt="" />
	<img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=3" alt="" />
	<!-- Row -->
	<img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=4" alt="" />
	<img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=5" alt="" />
	<img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=6" alt="" />
	<!-- Row -->
	<img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=7" alt="" />
	<img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=8" alt="" />
	<img class="w-48 h-48 bg-surface-500 rounded-container" src="https://picsum.photos/192/192?random=9" alt="" />
</section>

Quad

tsx

export default function Quad() {
	return (
		<section className="grid grid-cols-2 gap-4">
			{/* Row */}
			<img className="h-64 w-64 bg-surface-500 rounded-container" src="https://picsum.photos/256/256?random=1" alt="" />
			<img className="h-64 w-64 bg-surface-500 rounded-container" src="https://picsum.photos/256/256?random=2" alt="" />
			{/* Row */}
			<img className="h-64 w-64 bg-surface-500 rounded-container" src="https://picsum.photos/256/256?random=3" alt="" />
			<img className="h-64 w-64 bg-surface-500 rounded-container" src="https://picsum.photos/256/256?random=4" alt="" />
		</section>
	);
}

svelte

<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" alt="" />
	<img class="h-64 w-64 bg-surface-500 rounded-container" src="https://picsum.photos/256/256?random=2" alt="" />
	<!-- Row -->
	<img class="h-64 w-64 bg-surface-500 rounded-container" src="https://picsum.photos/256/256?random=3" alt="" />
	<img class="h-64 w-64 bg-surface-500 rounded-container" src="https://picsum.photos/256/256?random=4" alt="" />
</section>

Masonry

tsx

export default function Masonry() {
	return (
		<section className="grid grid-cols-2 gap-4 md:grid-cols-4">
			{/* Column */}
			<div className="grid gap-4">
				<img className="bg-surface-500 rounded-container" src="https://picsum.photos/220/320?random=1" alt="" />
				<img className="bg-surface-500 rounded-container" src="https://picsum.photos/220/120?random=2" alt="" />
				<img className="bg-surface-500 rounded-container" src="https://picsum.photos/220/280?random=3" alt="" />
			</div>
			{/* Column */}
			<div className="grid gap-4">
				<img className="bg-surface-500 rounded-container" src="https://picsum.photos/220/300?random=4" alt="" />
				<img className="bg-surface-500 rounded-container" src="https://picsum.photos/220/280?random=5" alt="" />
				<img className="bg-surface-500 rounded-container" src="https://picsum.photos/220/140?random=6" alt="" />
			</div>
			{/* Column */}
			<div className="grid gap-4">
				<img className="bg-surface-500 rounded-container" src="https://picsum.photos/220/280?random=7" alt="" />
				<img className="bg-surface-500 rounded-container" src="https://picsum.photos/220/320?random=8" alt="" />
				<img className="bg-surface-500 rounded-container" src="https://picsum.photos/220/140?random=9" alt="" />
			</div>
			{/* Column */}
			<div className="grid gap-4">
				<img className="bg-surface-500 rounded-container" src="https://picsum.photos/220/320?random=10" alt="" />
				<img className="bg-surface-500 rounded-container" src="https://picsum.photos/220/140?random=11" alt="" />
				<img className="bg-surface-500 rounded-container" src="https://picsum.photos/220/280?random=12" alt="" />
			</div>
		</section>
	);
}

svelte

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

Featured

tsx

export default function Featured() {
	return (
		<section className="grid gap-4">
			{/* Featured */}
			<header>
				<img className="h-auto max-w-full bg-surface-500 rounded-container" src="https://picsum.photos/960/512?random=1" alt="Featured" />
			</header>
			{/* Row */}
			<div className="grid grid-cols-5 gap-4">
				<img className="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=2" alt="" />
				<img className="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=3" alt="" />
				<img className="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=4" alt="" />
				<img className="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=5" alt="" />
				<img className="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=6" alt="" />
			</div>
		</section>
	);
}

svelte

<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" alt="Featured" />
	</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" alt="" />
		<img class="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=3" alt="" />
		<img class="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=4" alt="" />
		<img class="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=5" alt="" />
		<img class="h-full w-full bg-surface-500 rounded-container" src="https://picsum.photos/200/200?random=6" alt="" />
	</div>
</section>

Attribution

Images courtesy of Lorem Picsum. Markup and styles inspired by Flowbite.

catppuccin

cerberus

concord

crimson

fennec

hamlindigo

legacy

mint

modern

mona

nosh

nouveau

pine

reign

rocket

rose

sahara

seafoam

terminus

vintage

vox

wintry

Grid

Quad

Masonry

Featured

Attribution