Image Layouts

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>
	);
}

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>
	);
}

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>
	);
}

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>
	);
}