Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def
What about the situation in which we aren’t specifying the number of columns or rows to be repeated? There are two properties we can use in this situation; auto-fill and auto-fit. We’ll explore what each one does and why we would need to use them on our grid-tracks.
[00:00] Using the repeat function, we can pass a number as the first argument, and this defines how many grid tracks we want to use. What if we don' want to specify an absolute value here? For example, what if our layout was to be three columns sometimes, but two columns on a smaller layout, and maybe one column on an even smaller layout?
[00:24] Luckily, there's an easy way to do this with CSS Grid. Instead of passing a number as the first argument to repeat, we can pass auto-fill, and now our grid items wrap, depending on how much space there is. There's no defined amount of grid template columns, because it varies with the view port.
[00:44] In our example here, we're using 100 pixels as the set width of each of our columns. What happens with this, is that we get a gap on the right-hand side, because there's an absolute value set for each width.
[01:00] To get around this, we can use minmax(100px, auto) to say that every grid template column is going to be at least 100 pixels, and at most, taking the available space. We can pass multiple values here. We could use, for example, 50px, 70px, 100px, and these are going to repeat, depending on how much space we have.
[01:28] If we make the viewport smaller, it wraps depending on the space. There might be some cases in which we have empty grid tracks. For example, if we only had three DIVs here, there are empty grid tracks that CSS Grid has created for us here. We can see them being created as we adjust the viewport.
[01:58] If we wanted this space to go away, so that each one of these takes up the available space, we can instead use auto-fit.