From the course: Responsive Layout

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Variable columns

Variable columns - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

Variable columns

“

- [Instructor] Next we'll look at auto-fill and auto-fit. These properties are really useful for making a responsive layout because they let you have a variable amount of columns. Here we have a container div with a bunch of items inside it. Let's say we're making something like a photo gallery where every item will be the same width. We know we need to have multiple columns but we don't know how many because it will be different depending on the width of the view port. So looking at the code, I'm going to add some CSS here on the container element line 12. Gonna do grid, template columns to set the number of columns. Then I'm gonna do repeat with parenthesis. Instead of starting with a number for the amount of times I want it to repeat, I'm gonna start with auto dash fill and then comma, and then 150 pixels for the width of each column. Going over here I refresh and I can see I have 150 pixel width columns. But the thing that's different here is it makes a different number of columns…

Contents