grid-template-columns vs grid-auto-columns
Hey, what would be the difference between the examples below? Other than the ability to define a specific number of columns and how the elements fill the container when using
grid-template-columns, when using auto-fill or auto-fit these both seem like they would achieve the same thing to me? Any explanation would be appreciated, Thanks in advance.
7 Replies
- the first will wrap to a new row if there is no space.
- the second just sets a default for a column.
(could be usefull if you have set grid-auto-flow: column for a horizontal scroll p.e.)
auto-fit sort of works like flex wrap. If there is enough room for the size of the elements to fit in one row then it will fit all that it can. Otherwise if it cant fit all elements with the specified size that u give it the elements will wrap to a new line.
Sara Soueidan
CSS-Tricks
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
goes more in detail in this article
while auto fill will create implicit columns meaning at a certain viewport width there will be extra columns created that u did not want
ah thank you, so
grid-auto-columns will overflow the container?
ah i see, thanks for the link, i'll check it outwell all grid-auto-columns and grid- auto-rows do is create the sizing for any implicit grid item that is created. So for example if ur entire grid container is full and u want to add another element to that grid the grid will make a new row even though it wasnt stated. when that new row or column is created the size is NOT the the same as the other columns. so u have to give it a size.
oh i see i see, thanks