From the course: Responsive Layout
Unlock the full course today
Join today to access over 24,000 courses taught by industry experts.
Variable columns - HTML Tutorial
From the course: Responsive Layout
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
Intro to CSS Grid2m 10s
-
(Locked)
Defining rows and columns3m 55s
-
(Locked)
Grid gap1m 52s
-
(Locked)
Sizing rows and columns5m 52s
-
(Locked)
Placing grid items5m 51s
-
(Locked)
Grid alignment overview1m 13s
-
(Locked)
Aligning tracks3m 46s
-
(Locked)
Aligning grid items within tracks2m
-
(Locked)
Aligning individual grid items1m 47s
-
(Locked)
Variable columns4m 45s
-
(Locked)
Grid template areas4m 12s
-
(Locked)
Naming grid lines2m 47s
-
(Locked)
Ordering grid items1m 16s
-
(Locked)
Grid flow and implicit tracks3m 55s
-
(Locked)
Challenge: The rainbow box1m 9s
-
(Locked)
Solution: The rainbow box6m 42s
-
-
-
-