在 TailWindCSS 中在大显示器和较少卡片上填充卡片的问题

Question

拜托，我的网格在移动设备和桌面设备上看起来都不错。但是在大型显示器上我想要最多 4 列。但目前我只有 3 个标签。有可能请在 TailWindCSS?

中将这 3 列填充到 container class 宽度

你知道，它看起来并不好看。

要不然我当然可以用flexbox了。我也试过了，但是我需要最后一张卡片对齐到左侧，所有其他卡片必须居中，这在 flexbox 中是不可能的。

3个要求：

一行最多 4 列（没问题 - 已解决）
在大型显示中将少于 4 列填充到容器的全宽
在小显示屏（宽度为 640 像素，这意味着横向移动设备）中必须显示 2 张卡片（不仅仅是一张）

问题1和3已解决。但是关于问题 2 好吗？可以用 tailwind CSS 解决它，或者我需要自己的特殊 classes?

这是我使用一张卡片的代码示例：

@tailwind base;

body {
  @apply bg-gray-900;
}

@tailwind components;
@tailwind utilities;

@layer components {
  .main {
    @apply min-h-screen mx-auto;
  }

  .card-container {
    @apply grid pt-3 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
  }

  .card {
    @apply rounded-lg overflow-hidden bg-gray-100 text-black shadow md:shadow-xl lg:shadow-2xl;
  }

  .site-header {
    @apply text-white text-center text-2xl font-bold p-10 bg-white bg-opacity-20 rounded-md;
  }

  .card-image {
    /*@apply object-cover max-h-96 w-max filter grayscale;*/
    @apply object-cover w-96 h-96;
  }

  .card-header {
    @apply flex m-2 font-semibold;
  }

  .card-title {
    @apply mt-3 text-lg font-medium uppercase text-center;
  }

  .card-description {
    @apply px-5 h-80 overflow-y-auto;
  }

  .card-labels {
    @apply bottom-0 flex space-x-1 m-2;
  }

  .card-labels-item {
    @apply text-center text-xs font-semibold px-3 py-1 rounded-md border-2 border-gray-800;
  }

  .btn-vote {
    @apply inline-flex items-center border-2 border-black w-20 rounded-md mr-2 px-1;
  }
}

.thumbup {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'><path d='M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z' /></svg>")
    left center no-repeat;
}

.thumbdown {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'><path d='M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.105-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z' /></svg>")
    left center no-repeat;
}

<main class="container main">
  <section class="p-3">
    <h2 class="site-header">A-Z Planet</h2>
    <div class="card-container">
      <!-- First card -->
      <article class="card">
        <figure>
          <img class="card-image" src="https://zrebec.sk/assets/alpaka.jpg" alt="" />
        </figure>
        <header class="card-header h-8">
          <a href="#" class="btn-vote">
            <div class="h4 w-4 mr-1 thumbup">&nbsp;</div>
            186
          </a>
          <a href="#" class="btn-vote">
            <div class="h-4 w-4 mr-1 thumbdown">&nbsp;</div>
            12
          </a>
          <div class="flex-grow font-bold w-100 text-right">84%</div>
        </header>
        <h2 class="card-title">Alpaca</h2>
        <p class="card-description">The alpaca is a camelid mammal native to South America. Closely related to its larger cousin, the llama, the two species are able to interbreed. Yarn spun from alpaca wool is popular for warm, soft sweaters, socks, mittens, and hats, making the fur of these domesticated animals a valuable commodity.</p>
        <footer class="card-labels">
          <div class="card-labels-item text-white bg-green-500">White soft fur</div>
          <div class="card-labels-item text-black bg-yellow-500">Cute but not domestic</div>
          <div class="card-labels-item text-black bg-red-500">Sometimes strange</div>
        </footer>
      </article>
    </div>
  </section>
</main>

当然，你可以在 TailwindCSS Playground 上查看我的整个代码。谢谢

谨致问候并感谢您的任何建议。

[这是我在 TailWindCSS Playground 上的代码][1]

Answer 1

解决方案

首先，您必须编辑 tailwind 的配置文件

module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        'auto-fit': 'repeat(auto-fit, minmax(0, 1fr))',
        'auto-fill': 'repeat(auto-fill, minmax(0, 1fr))',
      },
      gridTemplateRows: {
        'auto-fit': 'repeat(auto-fit, minmax(0, 1fr))',
        'auto-fill': 'repeat(auto-fill, minmax(0, 1fr))',
      },
    },
    variants: {},
    plugins: [],
  },
}

最后在 css:

中编辑 card 容器

.card-container {
  @apply grid grid-flow-row gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-auto-fit;
}

完成了。非常感谢 chojnicki

Answer 2

现在我可能有了最好的解决方案。

在 tailwind.config.js 中，您应该将 gridTemplateColumns 中的 auto-fit 更改为这一行：

"auto-fit": "repeat(auto-fit, minmax(calc( 25% - 1rem ), 1fr))",

abowe 行表示 gridTemplateColumns 中的自动调整将最小为 25% - 1rem（因为表之间的间隙），这会导致 xl 或更大显示中最多 4 张卡片，而 1fr 将是最大尺寸。如果您只有一张卡片（最大拉伸）或者如果您有 12 张卡片，则此解决方案有效，那么您将 4 张卡片用于 3 行。

那你可以把你的.card-containerclass调整成这个：

.card-container {
  @apply grid grid-flow-row gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-auto-fit;
}

你怎么看？

在 TailWindCSS 中在大显示器和较少卡片上填充卡片的问题

Problem to fill cards in TailWindCSS on large displays and less cards

html

css

grid

flexbox

tailwind-css

解决方案