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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!