如何创建具有动态数量的网格列的 TailwindCSS 网格？

Question

我正在将 Vue3 与 TailwindCSS 结合使用，并希望创建一个具有动态grid-cols-{n}类的网格。我知道 TailwindCSS 默认情况下最多支持 12 列，但我无法自定义主题，因为列的数量完全是动态的。

给出以下纯 HTML / Js 示例

const amountOfItemsPerRow = 16;

const container = document.getElementById("container");

for (let i = 0; i < amountOfItemsPerRow; i++) {
  const item = document.createElement("div");
  item.innerText = i;
  container.appendChild(item);
}

container.classList.add(`grid-cols-${amountOfItemsPerRow}`); // this doesn't work if the value is greater than 12

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

<div id="container" class="grid"></div>

amountOfItemsPerRow如果小于或等于 12，此代码可以正常工作，否则 CSS 就会损坏。

我是否必须编写代码来设置纯 CSS 来解决此问题，或者是否有动态 Tailwind 解决方案？

---

另一种方法：

根据我尝试替换该行的文档

container.classList.add(`grid-cols-${amountOfItemsPerRow}`);

和

container.classList.add(`grid-template-columns:repeat(${amountOfItemsPerRow},minmax(0,1fr))`);

提出一种“本地”方法，但这没有帮助。

Answer 1

你不能用普通的 TailwindCSS 来做到这一点。

@Ajay Raja 的建议行不通，因为它只适用于 JIT（即时）；因此，在编译应用程序之前，您可以使用任意值，但是一旦编译并部署了捆绑包，就不能是动态的。它仅在构建期间有效；所以如果你使用 CDN 你就做不到

您可以做的是查看该类的实现并设置一些 javascript 侦听器来动态设置样式属性：

从这里你可以看到 的实现.grid-columns-12。

.grid-columns-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

因此，从 JS 中你可以执行以下操作：

function setDynamicColumns(cols) {
  document
    .querySelector('#elementWithDynamicGrid')
    .style['grid-template-columns'] = `repeat(${cols}, minmax(0, 1fr))`
}

我不是 Vue 专家，但您可以像在 Angular 或 React 上一样设置双向数据绑定。

你在这里做什么

container.classList.add(`grid-template-columns:repeat(${amountOfItemsPerRow},minmax(0,1fr))`)

不起作用，因为您正在将style指令应用到class属性中

解决此问题的另一种方法是在构建时生成必要数量的类，以便您可以在运行时安全地使用它们：

如果您查看此处的文档

您可以通过修改文件来添加自己的自定义网格修改器tailwind.config.js。

module.exports = {  
  theme: {    
    extend: {      
      gridTemplateColumns: {        
      // Simple 16 column grid        
      '16': 'repeat(16, minmax(0, 1fr))',     
      }    
    }  
  }
}

因此，您可以添加一个函数来生成合理数量的列，如下所示：

//tailwind.config.js
function generateGridColumns(lastValue) {
   let obj = {}
   for(let i = 13; i < lastValue; i++) {
     obj[`${i}`] = `repeat(${i}, minmax(0, 1fr))`
   }
   return obj
}


module.exports = {  
  theme: {    
    extend: {      
      gridTemplateColumns: {
         ...generateGridColumns(100) // This generates the columns from 12 until 100
      }    
    }  
  }
}

请记住，当清除 tailwindCSS 构建时，您需要指示保留所有grid-columns-*类，因为清除器无法猜测您将使用它们