From the course: Responsive Layout
Unlock the full course today
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Sizing rows and columns - HTML Tutorial
From the course: Responsive Layout
Sizing rows and columns
- [Tutor] Besides using absolute values to define the width of a column and the height of rows, there are other options. The word, auto tells the columns to take up all the available width, I'm going to go over here in the code and on line 12, grid-template-columns: auto auto auto and then save and go over here and refresh. So the extra space is equally divided between the three columns, that means the extra space is equal, but the columns are not, because the first column has much wider content. We can also give only some of the columns an auto width, so I'm gonna go over here and change auto auto auto to 100 pixels for the middle column and then save and refresh and there, that middle column is 100 pixels, with the other two dividing the leftover space evenly. The CSS grid, we have a useful new unit of measurement called the fr, which was created just for grid, the letters F-R stand for fractional unit. What the fr does is it allocates any free space that's left over after creating…
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
-
Defining rows and columns3m 55s
-
Grid gap1m 52s
-
Sizing rows and columns5m 52s
-
Placing grid items5m 51s
-
Grid alignment overview1m 13s
-
Aligning tracks3m 46s
-
Aligning grid items within tracks2m
-
Aligning individual grid items1m 47s
-
Variable columns4m 45s
-
Grid template areas4m 12s
-
Naming grid lines2m 47s
-
Ordering grid items1m 16s
-
Grid flow and implicit tracks3m 55s
-
Challenge: The rainbow box1m 9s
-
Solution: The rainbow box6m 42s
-
-
-
-