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

Question

拜托，我的网格在移动设备和桌面设备上看起来都不错。但在大型显示器上，我最多需要 4 列。但目前我只有 3 个标签。有可能请在 TailWindCSS 中将这 3 列填充到 container 类宽度？

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

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

3 个要求：

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

问题 1 和 3 已解决。但是关于问题2好吗？有可能用顺风 CSS 解决它还是我需要自己的特殊类？

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

@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))",

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

然后你可以将你的.card-container 类调整为这个：

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

你怎么看？