Tailwind CSS 网格布局

Answer 1

布局创建了 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>

Answer 2

为了实现您的设计指南目标，您可以轻松使用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>

确保您的小图像尺寸为正方形，以便更正确地显示。 享受！