Search code examples
csscss-grid

Using auto-fill to create columns in css grid

The following will create as many 200 pixel columns as will fit into the container.

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

However, I cannot comphrehend the 1fr part. This means 1 fraction. But, how does that go with auto-fill?

Solution

  • The columns are defined using the repeat() function and have a minimum width of 200px, and a maximum set to 1fr, so that they would expand and equally share any extra space when it is available. As for the number of columns per row, we’re going to use the auto-placement keywords, so that we let the browser take care of the responsiveness of the grid and will wrap the columns into new rows when needed.

    The browser will place and size the columns in the first example using the auto-fill keyword. - from this website https://css-tricks.com/