Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

Rory Smith
InstructorRory Smith
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 6 years ago

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.

egghead
egghead
~ 5 minutes ago

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

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today