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

What is the best way to create underlined text that is either left-aligned or centered?

Comparing parameters between two functions in Javascript: a step-by-step guide

When using Material UI, it is not possible to apply the text-overflow: ellipsis and overflow: hidden properties to multiple

Experiencing an excessive number of re-renders can be a common issue in React as it has limitations set in place to prevent infinite loops. This

Ways to discreetly conceal forward and backward buttons in the v-pagination component of Vuetify

What is the best way to extract all of the JSON data from Firebase using a web platform?

React state not being updated by setState method

The dropdown menu in AngularJS is unable to retrieve the selected index

Error encountered: jQuery AJAX JSON request failed to be caught

Navigating back to the beginning of the webpage following the completion of a form submission utilizing Master Pages and Ajax

unable to see the new component in the display

Radio buttons have been concealed and are not visible

How can I retrieve the value of a div nested within another div?

Encountered a parsing error when attempting to integrate SCSS with webpack and babel setup

How can I pass the dynamically generated ID from PHP to AJAX/jQuery using an anchor tag?

What is the best way to define the width of text inside a div block?

Preserve the content in the text box corresponding to the selected radio button

WordPress CSS Styling Issue: HTML Element Display Problem

What is the method for utilizing HSL instead of RGB in the global declaration of SCSS using the JavaScript API

Dynamically include new events