Creating a versatile TailwindCSS grid that can adjust to varying numbers of grid columns

Question

Creating a versatile TailwindCSS grid that can adjust to varying numbers of grid columns

I am currently working with Vue3 and TailwindCSS, attempting to create a grid using a dynamic grid-cols-{n} class. While I am aware that TailwindCSS typically supports up to 12 columns by default, the challenge arises when the number of columns needed is entirely dynamic and cannot be customized within the theme.

For example, consider the following simple HTML / JS snippet:

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>

In this scenario, the code functions correctly if the value of amountOfItemsPerRow is less than or equal to 12, but breaks the CSS style when exceeding 12 columns.

Is there a way to address this issue without resorting to writing custom CSS styles, perhaps through a dynamic solution within Tailwind?

An Alternative Approach:

Following guidance from the TailwindCSS documentation, I attempted to modify the line

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

to

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

In an effort to develop a more "native" solution, however, this adjustment did not yield the desired outcome.

javascript html css tailwind-css

Answer 1

Answer №1

Unfortunately, plain TailwindCSS does not support dynamic grid template columns.

Even though @Ajay Raja's suggestion is for JIT (just-in-time) compilation, it won't work for dynamic changes after deployment. The only option is to set up Javascript listeners to dynamically modify the style attribute based on the implementation of the desired class.

To achieve this, you can refer to the implementation of the .grid-columns-12 class from the documentation.

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

For a Vue application, consider implementing two-way data binding like in Angular or React instead of directly applying style directives to class attributes as previously attempted.

An alternative solution is to pre-generate a range of custom grid classes in the tailwind.config.js file during build time, allowing safe usage at runtime:

You can create your own custom grid modifiers following the guidelines in the documentation.

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

Add a function in the config file that generates a series of grid columns and remember to specify to preserve all grid-columns-* classes during purging to avoid unintentional removal.

Answer 2

Unfortunately, plain TailwindCSS does not support dynamic grid template columns.

Even though @Ajay Raja's suggestion is for JIT (just-in-time) compilation, it won't work for dynamic changes after deployment. The only option is to set up Javascript listeners to dynamically modify the style attribute based on the implementation of the desired class.

To achieve this, you can refer to the implementation of the .grid-columns-12 class from the documentation.

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

For a Vue application, consider implementing two-way data binding like in Angular or React instead of directly applying style directives to class attributes as previously attempted.

An alternative solution is to pre-generate a range of custom grid classes in the tailwind.config.js file during build time, allowing safe usage at runtime:

You can create your own custom grid modifiers following the guidelines in the documentation.

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

Add a function in the config file that generates a series of grid columns and remember to specify to preserve all grid-columns-* classes during purging to avoid unintentional removal.

Answer 3

Answer №2

In my expertise with React.js & Next.js:

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

// Defining interface IGrid to include all properties of <div />
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:

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2753464e4b504e4943445454671409140914">[email protected]</a>

without any further setup needed.

⚠️ Although not considered the best practice:

Microsoft Edge Tools: (no-inline-styles)

Answer 4

In my expertise with React.js & Next.js:

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

// Defining interface IGrid to include all properties of <div />
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:

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2753464e4b504e4943445454671409140914">[email protected]</a>

without any further setup needed.

⚠️ Although not considered the best practice:

Microsoft Edge Tools: (no-inline-styles)

Answer 5

Answer №3

Generating Dynamic Class Names with Tailwindcss is a breeze. You have the flexibility to include dynamic classes within square brackets using 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 a more in-depth explanation, visit this link.

Answer 6

Generating Dynamic Class Names with Tailwindcss is a breeze. You have the flexibility to include dynamic classes within square brackets using 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 a more in-depth explanation, visit this link.

Creating a versatile TailwindCSS grid that can adjust to varying numbers of grid columns

Answer №1

Answer №2

Answer №3

Similar questions

Tips for sending an icon as a prop in React components

Tips on rearranging the location of a div element within a directive

Using AJAX to send data with a POST request in Django may not function properly

Angular 6: Issue with displaying data on the user interface

Function that contains a JavaScript reference and observation

The FormData object appears to be blank, even though it was supposed to be populated when attempting to send a PDF file using a multipart FormData POST request in Cypress

If an element exists in one of the dimensions of a multi-dimensional array

Tips for retrieving nested objects in a get request

Specialized Node.js extension for automatic dependency installation

Modifying attributes for individual components in Vue.js classes

Data modifications in polymer are not being accurately displayed

Please provide instructions on how to update a webpage section using ajax/json

What are the steps to manually activate input validation in Angular 2?

Is there a way to retrieve the Boolean value from an ng-show attribute without having to re-evaluate the expression?

Different methods to retrieve content within a div that is located on a separate, included page

Encountering Errors with Angular JS Following Update from Version 1.1.0 to 1.1.1

In the iOS app when the Ionic HTML5 select keypad is opened, a bug causes the view to scroll upwards and create empty space after tapping the tab

Assist me in minimizing redundant code in a basic jQuery function

Is the element loaded but not appearing on screen?

Is it possible to utilize the default error handling page rather than a specific view for expressing