Grid-auto-flow CSS grid

When we already specify our grid-template-rows and grid-template-columns, is there any reason we are to specify grid-auto-rows or grid-auto-columns?
I mean when are we going to need the grid-auto-columns and grid-auto-rows in a real life project?

awesome good question

Please I need an answer, I did not really understand the explanation given in the exercise. I will appreciate if anyone can help please

Hey @byte6953803474

I think the grid-auto-flow property is a concise way of allowing you to keep the control of the way you want to display your content in the case you wanna add content on the page instead of adding a value to grid-template each time you add something.
Look at this screenshot:

The grid template works for 3 columns and 3 rows but if you add content since there is no defined value for a fourth or fifth row or column, it looks like this which is not ideal if per example you have a small e-shop page and you have dozens new products that will be added to the page.

I hope this helps :slight_smile:

1 Like

Thank you for the explanation. I watched a tutorial video on Scrimba which helped me to understand it more.