如何使用TailwindCSS设置每个单元格具有特定宽度和高度的网格样式

Question

我使用的是TailwindCSS，并希望显示4x4单元的2D网格示例。每个单元格的宽度应为w-8，高度应为h-8。

第一个解决方案是使用柔性盒行。

​

<script src="https://cdn.tailwindcss.com"></script>

<div>
  <div class="flex">
    <div class="w-8 h-8 shadow">1</div>
    <div class="w-8 h-8 shadow">2</div>
    <div class="w-8 h-8 shadow">3</div>
    <div class="w-8 h-8 shadow">4</div>
  </div>
  <div class="flex">
    <div class="w-8 h-8 shadow">5</div>
    <div class="w-8 h-8 shadow">6</div>
    <div class="w-8 h-8 shadow">7</div>
    <div class="w-8 h-8 shadow">8</div>
  </div>
  <div class="flex">
    <div class="w-8 h-8 shadow">9</div>
    <div class="w-8 h-8 shadow">10</div>
    <div class="w-8 h-8 shadow">11</div>
    <div class="w-8 h-8 shadow">12</div>
  </div>
  <div class="flex">
    <div class="w-8 h-8 shadow">13</div>
    <div class="w-8 h-8 shadow">14</div>
    <div class="w-8 h-8 shadow">15</div>
    <div class="w-8 h-8 shadow">16</div>
  </div>
</div>

​

我想知道是否可以使用网格实现相同的结果。

​

<script src="https://cdn.tailwindcss.com"></script>

<div class="grid grid-cols-4">
  <div class="shadow">1</div>
  <div class="shadow">2</div>
  <div class="shadow">3</div>
  <div class="shadow">4</div>
  <div class="shadow">5</div>
  <div class="shadow">6</div>
  <div class="shadow">7</div>
  <div class="shadow">8</div>
  <div class="shadow">9</div>
  <div class="shadow">10</div>
  <div class="shadow">11</div>
  <div class="shadow">12</div>
  <div class="shadow">13</div>
  <div class="shadow">14</div>
  <div class="shadow">15</div>
  <div class="shadow">16</div>
</div>

​

上面的例子显示网格沿着x轴延伸。我无法控制牢房的大小。如何告诉网格对每个单元格使用特定的宽度和高度？

对于我的情况，宽度和高度是相等的，因为每个单元格是一个正方形。我不介意解决方案是否使用简单的CSS！

Answer 1

width-父级宽度

您不能在尾风的grid-cols-{n}中控制单元格的大小，但仍然可以控制父单元格的宽度。w-32和h-32只是w-8乘以4(因为你需要4个单元格)

<div class="grid grid-cols-4 w-32 h-32"> 
  <div class="shadow">1</div>
  ...
  <div class="shadow">16</div>
</div>

2: CSS实用程序

在CSS中，顺风的grid-cols-{n}将呈现为grid-template-columns: repeat(n, minmax(0, 1fr)); --每个列都有相同的大小。若要指定宽度，可以将minmax(0, 1fr)更改为必需的值。有关CSS网格模板的更多信息，您可以找到这里。

“顺风”提供了一种添加自定义实用程序类的方法。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .grid-32px-css {
    grid-template-columns: repeat(4, theme('width.8')); /* or just use 32px instead of theme('width-8') like grid-template-columns: repeat(4, 32px) */
    grid-template-rows: repeat(4, theme('height.8'));
  }
}

并使用ot类

<div class="grid grid-32px-css">
  <div class="shadow">1</div>
  ...
  <div class="shadow">16</div>
</div>

3:实用插件

基本上和上面一样，但是在tailwind.config.js文件中

const plugin = require('tailwindcss/plugin'); 

module.exports = {
  plugins: [
    plugin(({ addUtilities }) => {
        const utilities = {
            '.grid-32px': {
                'grid-template-columns': "repeat(4, theme('width.8'))",
                'grid-template-rows': "repeat(4, theme('height.8'))",
            }
        };
        addUtilities(utilities);
    }),
  ],
}

<div class="grid grid-32px">
  <div class="shadow">1</div>
  ...
  <div class="shadow">16</div>
</div>

注意:实用程序的名称可以是任意的-你负责

演示