How to create a TailwindCSS grid with a dynamic amount of grid columns?

145
March 05, 2022, at 12:30 PM

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.

Answer 1

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

Answer 2

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

Rent Charter Buses Company
READ ALSO
Background-color and spacing between posts in posting system [duplicate]

Background-color and spacing between posts in posting system [duplicate]

Now, I have a posting systemThere's an input field and a submit button

111
How to change default date format in JavaScript or in HTML

How to change default date format in JavaScript or in HTML

I've a input field as type date and the of that format is dd/mm/yyyy which is not defaultIn my desktop screen it's working properly and also I've a placeholder in the same field as DD/MM/YYYY

140
How to adjust Bulma Column height when one changes?

How to adjust Bulma Column height when one changes?

is it possible to make a column adjust its height when others change? I have all columns at the same height using flex but when I change one of them dynamically, the others stay the same

121
how to override user agent stylesheet in fullscreen on mobile?

how to override user agent stylesheet in fullscreen on mobile?

I'm working on mobile version of http://library-devbdrc

171