【问题标题】: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>
      

      【讨论】:

        猜你喜欢
        • 2020-06-29
        • 2023-01-16
        • 1970-01-01
        • 2014-01-18
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多