Tailwind CSS 网格布局答案

【问题标题】：Tailwind css grid layoutTailwind CSS 网格布局
【发布时间】：2022-01-29 20:29:49
【问题描述】：

我正在为我的迷你项目尝试使用顺风 css 来实现下面的网格布局。

我的期望

我所取得的成就

下面是我的代码

<div id="main" class="container grid grid-row-3 grid-flow-col gap-1">
    <div class="bg-blue-500 row-span-3">
        <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 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-300">
        <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>

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

布局创建顺风 css 3 网格系统

<div id="main" class="container grid grid-cols-4 grid-rows-3 gap-2">
  <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>

【讨论】：