布局创建了 tailwind css 3 网格系统
<script src="https://cdn.tailwindcss.com"></script>
<div id="main" class="container grid grid-cols-4 grid-rows-3 gap-4">
<div class="bg-blue-500">
<img class="object-cover w-full h-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
</div>
<div class="bg-blue-500">
<img class="object-cover w-full h-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
</div>
<div class="bg-blue-500">
<img class="object-cover w-full h-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
</div>
<div class="bg-blue-500">
<img class="object-cover w-full h-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
</div>
<div class="bg-blue-500 col-span-3 row-span-2">
<img class="object-cover w-full h-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
</div>
<div class="bg-blue-500">
<img class="object-cover w-full h-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
</div>
<div class="bg-blue-500">
<img class="object-cover w-full h-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
</div>
</div>
为了实现您的设计指南目标,您可以轻松使用flex系统类,如以下代码
<div class="flex flex-col p-3">
<div class="flex">
<div class="m-1">
<img class="" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
</div>
<div class="m-1">
<img class="" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
</div>
<div class="m-1">
<img class="" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
</div>
<div class="m-1">
<img class="" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
</div>
</div>
<div class="flex">
<div class="flex grow m-1">
<img class="w-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
</div>
<div class="flex flex-col m-1 basis-1/4 ">
<div class="m-1">
<img class="" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
</div>
<div class="m-1">
<img class="" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
</div>
</div>
</div>
</div>
确保您的小图像尺寸为正方形,以便更正确地显示。 享受!