dynamic grid in tailwindcss with arbitrary values

Question

in my tailwindcss config i have this configuration

gridTemplateColumns: {
        dynamicGrid: 'repeat(auto-fit, minmax(var(--min-value), 1fr))',
      },

<div className='grid grid-dynamicGrid[200px] ' >
         {Array(6).fill(' ').map((_,i:number) =>  <p>hello</p>)}
 </div>

I want to use my custom template columns grid and pass to it an arbitrary to take place on --min-value variable how to do so? is it even possible?

Wongjn · Accepted Answer · 2023-09-25 06:40:23Z

1

To set a dynamic value for the --min-value CSS variable, consider setting it via the style attribute:

tailwind.config = {
  theme: {
    extend: {
      gridTemplateColumns: {
        dynamicGrid: 'repeat(auto-fit, minmax(var(--min-value), 1fr))',
      },
    },
  },
};

function App() {
  const min = '200px';
  
  return (
    <div className='grid grid-cols-dynamicGrid' style={{ '--min-value': min }}>
      {Array(6).fill(' ').map((_,i) =>  <p key={i}>hello</p>)}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App/>);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div id="app"></div>

Also, please be aware that you may have meant the class grid-cols-dynamicGrid, not grid-dynamicGrid.

answered Sep 25, 2023 at 6:40

Wongjn

27.1k5 gold badges24 silver badges50 bronze badges

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

2 Comments

Abdallah Ag Over a year ago

Okey in case i want to assign different values on each screen (mobile,tablet,desktop) how to do so ?

Wongjn Over a year ago

You could consider using different CSS variables per variant.

Collectives™ on Stack Overflow

dynamic grid in tailwindcss with arbitrary values

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related