How to style a grid where each cell has a specific width and height using TailwindCSS

Question

I'm using TailwindCSS and want to display the example 2D grid of 4 x 4 cells. Each cell should have a width of w-8 and a height of h-8.

The first solution would be using flexbox rows

<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>

I would like to know if I can achieve the same result using a grid

<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>

The example above shows that the grid stretches along the x axis. I have no control over the cell size. How can I tell the grid to use a specific width and height for each cell?

For my case width and height are equal, because each cell is a square. I don't mind if solutions use plain CSS!

Answer 1

1st way - parent's width

You cannot control size of a cell in a Tailwind's grid-cols-{n}, but you may still control parent's width. w-32 and h-32 are just w-8 times 4 (as you need 4 on 4 cells)

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

2nd: CSS utilities

Tailwind's grid-cols-{n} will be rendered as grid-template-columns: repeat(n, minmax(0, 1fr)); in CSS - every column will has equal sizes. To specify width you may change minmax(0, 1fr) to a required value. More about CSS grid templates you may find here

Tailwind provides you a way to add custom utility classes

@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'));
  }
}

and use ot like

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

3rd: utitlity plugin

Basically same thing as above but within tailwind.config.js file

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>

Note: name of utility class could be any - you're in charge

DEMO