Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    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.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    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?

    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.

    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.

    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.

    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.

    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.