Home > OS >  How do I go about not having to write auto 20 times for grid-template-columns
How do I go about not having to write auto 20 times for grid-template-columns

Time:05-27

Hey all not to sure where I should ask this question but basically Im working on Etch a Sketch and for my original 16x16 grid. I used display:grid; and grid-template-columns and wrote auto 16 times. This did the trick but Im guessing its not the way to go when you have a grid that 90x90 Any tips?

CodePudding user response:

Use the repeat() function:

grid-template-columns: repeat(90, 1fr);

This can be used for grid-template-rows also.

References:

CodePudding user response:

I think this is what you are looking for:

/*Creates 90 columns, each 150px in width*/
grid-template-columns: repeat(90, 150px); 
/*Creates 90 rows, each 150px in height*/
grid-template-rows: repeat(90, 150px);

  • Related