如何增加Tailwind CSS网格的行数与列数？

要扩大Tailwind默认的12列/行限制，你可以通过以下几种方式实现：

方式一：自定义扩展指定行列数 #

在项目的tailwind.config.js配置文件中，通过theme.extend字段添加需要的行列配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        // 例如添加24列的网格配置
        '24': 'repeat(24, minmax(0, 1fr))',
      },
      gridTemplateRows: {
        // 例如添加20行的网格配置
        '20': 'repeat(20, minmax(0, 1fr))',
      },
    },
  },
  plugins: [],
}

配置完成后，就能直接使用grid-cols-24、grid-rows-20这类类名来创建对应数量的网格。

方式二：使用任意值快速定义 #

如果只是临时需要非默认数量的行列，无需修改配置文件，直接用Tailwind的任意值功能：

• 创建15列网格：使用类名 grid-cols-[repeat(15,minmax(0,1fr))]
• 创建18行网格：使用类名 grid-rows-[repeat(18,minmax(0,1fr))]

方式三：批量生成连续行列范围 #

如果需要覆盖并扩展默认的12个值，生成连续范围的行列配置，可以用循环批量创建：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: Object.fromEntries(
        Array.from({ length: 24 }, (_, i) => [
          `${i + 1}`, `repeat(${i + 1}, minmax(0, 1fr))`
        ])
      ),
      gridTemplateRows: Object.fromEntries(
        Array.from({ length: 24 }, (_, i) => [
          `${i + 1}`, `repeat(${i + 1}, minmax(0, 1fr))`
        ])
      ),
    },
  },
  plugins: [],
}

这段代码会生成从1到24的所有列/行配置，完全覆盖默认的12个值。

内容的提问来源于stack exchange，提问作者Tyler