CSS Grid help | Scrimba | Page 1

distant lynx Oct 25, 2022, 12:19 AM

#

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

Can someone break down what this line of code does with css grid? am confused
thanks

rustic karma Oct 25, 2022, 1:27 AM

#

grid-template-colums is telling the browser how many columns you want to have in your grid. repeat is a function for setting how many columns you want to have. repeat takes in 2 arguments - the number of columns and the size of the columns, so for example, if you wanted 5 columns that were all the same size, you could do this:

grid-template-columns: repeat(5, 1fr)

Which would be the same as saying:

grid-template-columns: 1fr 1fr 1fr 1fr 1fr

Of course, we're not doing that here, instead we're using the term autofill which tells the browser to put as many columns as possible in the same row. After that, we set the size of those columns using the minmax function.

minmax does exactly as it sounds, it allows you to set a minimum and maximum size of things. In this case we're using it to set the size of each individual column. minmax(250px, 1fr) means "make each column no smaller than 250px, and no bigger than 1fr" @distant lynx

stoic mantle Oct 25, 2022, 3:15 AM

#

@rustic karma explain autofit like you do above

rustic karma Oct 25, 2022, 3:23 AM

#

stoic mantle <@258270304944652288> explain ``autofit`` like you do above

https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/ This article does a far better job of explain the difference than I ever could

CSS-Tricks

Sara Soueidan

Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit` | CSS-Tr...

One of the most powerful and convenient CSS Grid features is that, in addition to explicit column sizing, we have the option to repeat-to-fill columns in a

distant lynx Oct 25, 2022, 5:32 AM

#

wow that article is probably the best i've ever seen...
thanks for the awesome explanation @rustic karma

#CSS Grid help