11

I'm using Vue3 with TailwindCSS and want to create a grid with a dynamic grid-cols-{n} class. I know that TailwindCSS supports up to 12 columns by default but I can't customize the theme because the amount of columns is completely dynamic.

Given the following plain HTML / Js example

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>

This code works fine if amountOfItemsPerRow is smaller or equal than 12, otherwise the CSS is broken.

Do I have to write code to setup plain CSS solving this or is there a dynamic Tailwind solution?

Another approach:

Based on the docs I tried to replace the line

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

with

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

to come up with a "native" approach but that didn't help.

Improve this question
1
  • Another solution would be to create a grid component and use that based on the amount of data columns returned from API, etc. You would end up with multiple 12 column grids. Commented Oct 5, 2023 at 0:09

3 Answers 3

Reset to default
13
+100

You cannot do that with plain TailwindCSS.

What @Ajay Raja suggests won't work because it only works with JIT (just-in-time); so previously to compiling the application you can use arbitrary values but once you've compiled and deployed your bundle that cannot be dynamic. It only works during build-time; so if you're using a CDN you'll not make it

What you can do is taking a look at the implementation of the class and set up some javascript listeners to dynamically set the style attribute:

From here you can see the implementation of .grid-columns-12.

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

So from JS you can do something as follows:

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

I am not a Vue expert, but you could set two-way databinding like you would on Angular or React.

What you were doing here

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

Was not working because you were applying a style directive into the class attribute

Another approach to tackle this problem would be to generate the necessary amount of classes at build time so then you can use them safely at runtime:

If you take a look at the docs here

You can add your own custom grid modifiers by modifying the tailwind.config.js file.

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

So you can add a function that generates a reasonable number of columns there as follows:

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

Please bear in mind that when purging your tailwindCSS builds you need to indicate to keep all grid-columns-* classes since the purger cannot guess that you're going to use them

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

interesting. My approach container.classList.add(grid-template-columns:repeat(${amountOfItemsPerRow},minmax(0,1fr))) didn't work. But yours container.style['grid-template-columns'] = repeat(${amountOfItemsPerRow},minmax(0,1fr))`` does ... reproduced it with jsfiddle.net/t94gfops/3
Because we're dynamically setting the style attribute from the HTML. You were on the right path but setting a class that didn't exist
It's sad, that it does not work with TailwindCSS, because apparently it's integrated via postCSS. Since I am working on a custom calendar (existing ones do not fit my needs), I have a particular amount of grid column templates (2 to 8 columns), which I could add as custom templates and ensure I include those in the safelist. Thanks!
0

Here for React.js & Next.js:

import { AllHTMLAttributes } from "react";
import classNames from "classnames";

// @interface IGrid extends all <div /> properties
interface IGrid extends AllHTMLAttributes<HTMLDivElement> {}

export default function Grid({
  className = "",
  cols = 8,
  rows = 4,
  ...rest
}: IGrid) {
  const props = { className: classNames(className, "grid"), ...rest };
  const gridTemplateColumns = `repeat(${cols}, 1fr)`;

  const gridItems = new Array(cols * rows)
    .fill("")
    .map((_, i) => <div key={`gridItem-${i}`}>{i}</div>);

  return (
    <div {...props} style={{ gridTemplateColumns }}>
      {gridItems}
    </div>
  );
}

✅ Tested in: [email protected] without additional configuration.

⚠️ It isn't a best practice though:

Microsoft Edge Tools: (no-inline-styles)

Improve this answer

Comments

-1

Create Dynamic Class Name with Tailwindcss is easy. Inside [ and ], You can add Dynamic Class with TailwindCSS

const amountOfRows = 16;
const amountOfCellsPerRow = 16;

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

for (let rowIndex = 0; rowIndex < amountOfRows; rowIndex++) {
  for (let columnIndex = 0; columnIndex < amountOfCellsPerRow; columnIndex++) {
    const cell = document.createElement("div");
    cell.innerText = rowIndex + "|" + columnIndex;
    container.appendChild(cell);
  }
}

container.classList.add(`grid-cols-[${amountOfCellsPerRow}]`)

For more details here

Improve this answer

3 Comments

but what needs to be done after wrapping it inside []? I think the required css would be grid-template-columns: repeat(amountOfCellsPerRow, minmax(0, 1fr));
@medsmh Does my works fine?
sorry, no. I tested it with the CDN example from above

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.