Grid
<!-- Flex --><section class="flex justify-center"> <!-- Grid --> <div class="grid grid-cols-2 gap-6 md:grid-cols-3"> <!-- Row --> <div class="h-48 w-48"> <img class="h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1617296538902-887900d9b592" alt="" /> </div> <div class="h-48 w-48"> <img class="h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1597077962467-be16edcc6a43" alt="" /> </div> <div class="h-48 w-48"> <img class="h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1553184570-557b84a3a308" alt="" /> </div> <!-- Row --> <div class="h-48 w-48"> <img class="h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1509130446053-899ae7358ce6" alt="" /> </div> <div class="h-48 w-48"> <img class="h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1620005839871-7ac4aed5ddbc" alt="" /> </div> <div class="h-48 w-48"> <img class="h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1597531072931-8fceba101e4e" alt="" /> </div> <!-- Row --> <div class="h-48 w-48"> <img class="h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1510111652602-195fc654aa83" alt="" /> </div> <div class="h-48 w-48"> <img class="h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1612145342709-eadb6e22acca" alt="" /> </div> <div class="h-48 w-48"> <img class="h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1597077917598-97ca3922a317" alt="" /> </div> </div></section>Quad
<!-- Flex --><section class="flex justify-center"> <!-- Grid --> <div class="grid grid-cols-2 gap-4"> <div class="h-96 w-96"> <img class="h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1617296538902-887900d9b592" alt="" /> </div> <div class="h-96 w-96"> <img class="h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1597077962467-be16edcc6a43" alt="" /> </div> <div class="h-96 w-96"> <img class="h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1553184570-557b84a3a308" alt="" /> </div> <div class="h-96 w-96"> <img class="h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1509130446053-899ae7358ce6" alt="" /> </div> </div></section>Masonry
<!-- Grid --><section class="grid grid-cols-2 gap-4 md:grid-cols-4"> <!-- Column --> <div class="grid gap-4"> <img class="rounded-lg" src="https://images.unsplash.com/photo-1617296538902-887900d9b592" alt="" /> <img class="rounded-lg" src="https://images.unsplash.com/photo-1597077962467-be16edcc6a43" alt="" /> <img class="rounded-lg" src="https://images.unsplash.com/photo-1591775161903-497839a443c1" alt="" /> </div> <!-- Column --> <div class="grid gap-4"> <img class="rounded-lg" src="https://images.unsplash.com/photo-1617296539691-67feaadf389e" alt="" /> <img class="rounded-lg" src="https://images.unsplash.com/photo-1542835435-4fa357baa00b" alt="" /> <img class="rounded-lg" src="https://images.unsplash.com/photo-1553184570-557b84a3a308" alt="" /> </div> <!-- Column --> <div class="grid gap-4"> <img class="rounded-lg" src="https://images.unsplash.com/photo-1603855873822-0931a843ee3a" alt="" /> <img class="rounded-lg" src="https://images.unsplash.com/photo-1509130446053-899ae7358ce6" alt="" /> <img class="rounded-lg" src="https://images.unsplash.com/photo-1508931133503-b1944a4ecdd5" alt="" /> </div> <!-- Column --> <div class="grid gap-4"> <img class="rounded-lg" src="https://images.unsplash.com/photo-1633053663400-655b31fb88ac" alt="" /> <img class="rounded-lg" src="https://images.unsplash.com/photo-1578170222009-c7893aa20afd" alt="" /> <img class="rounded-lg" src="https://images.unsplash.com/photo-1610220941077-1ec123e7c043" alt="" /> </div></section>Featured
<!-- Flex --><section class="flex justify-center"> <!-- Grid --> <div class="grid gap-4"> <!-- Featured --> <div> <img class="h-auto max-w-full rounded-lg" src="https://images.unsplash.com/photo-1597077962467-be16edcc6a43" alt="" /> </div> <!-- Row --> <div class="grid grid-cols-5 gap-4"> <div class="w-86 h-48"> <img class="h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1620005839871-7ac4aed5ddbc" alt="" /> </div> <div class="w-86 h-48"> <img class="h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1553184570-557b84a3a308" alt="" /> </div> <div class="w-86 h-48"> <img class="h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1509130446053-899ae7358ce6" alt="" /> </div> <div class="w-86 h-48"> <img class="h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1510111652602-195fc654aa83" alt="" /> </div> <div class="w-86 h-48"> <img class="h-full w-full rounded-lg object-cover" src="https://images.unsplash.com/photo-1597077917598-97ca3922a317" alt="" /> </div> </div> </div></section>Attribution
Image layout markup and styles based on Flowbite. Please view our guide to learn more about integrating Flowbite elements and blocks in your Skeleton projects.