Creating Responsive Grids 3 exercises

Defining Grid Template Columns with Auto Fit

To create a flexible grid layout, we will use the repeat and auto-fit keywords.

Instead of hardcoding a specific number of columns, we'll let the browser automatically determine how many columns can fit based on the minimum width of 250px and a maximum of 1fr.

grid-template-columns: rep

Loading solution


0:01 What we need to do is to find our grid-template-columns, and we're going to use repeat, but we don't want to say three or four or five. Instead, we're going to use the auto-fit keyword. I want you to fit as many minimum of 250px columns as you can. Let me make this bigger.

0:25 A minimum of 250 for each column, 250px up to one fraction. Fit automatically as many as you can into a single row. Let's take a look. We go from four to three, to two, to one. Because at this point it can't fit two of them that are 250px minimum. It can only fit one, but then as soon as it gets enough space it fits two and then it fits three and four and it would keep growing if I could fit five but my...

0:54 I can zoom out, I guess. There you go. Now we have five, and six, and seven, and eight, depending on how far I zoom out. This is zoomed all the way out to for me 100 percent. Yours might look different. You might have two or three or four going across. It depends on the size of your screen. That's the general idea.

1:13 We're not hard coding how many to fit. It's not three, four, five. It's used the browser magic to figure it out, and that's thanks to auto-fit.