CSS Grid Layout
Treehouse
Course Summary
CSS Grid Layout provides a built-in, more efficient way of designing grid-based layouts in the browser. It brings a new set of properties, functions and flexible units that let you control the exact placement and sizing of grid components.
-
+
Course Description
About this Course CSS Grid Layout provides a built-in, more efficient way of designing grid-based layouts in the browser. It brings a new set of properties, functions and flexible units that let you control the exact placement and sizing of grid components. What you'll learn
- Declaring row and column tracks
- Setting gutters between rows and columns
- Creating flexible and responsive grid layouts without media queries
- Using Grid with Flexbox
About the Teacher
Guil is a front end web development teacher at Treehouse. You can follow him on Twitter at @guilh.
-
+
Course Syllabus
Introducing Grid Layout
Grid Layout provides a set of properties, functions and flexible units that let you control the sizing, positioning and spacing of content. You can build layouts faster and more easily than any layout tools you've relied on in the past. 7 steps- Understanding Grid 2:42
- Grid Concepts and Terminology 1:47
- Intro to Grid Review 6 questions
- Defining a Grid 4:39
- Setting Grid Rows 2:43
- Add Gutters Between Rows and Columns 4:18
- Understanding Grid Challenge 4 objectives
Flexible Sized Grids
Grid Layout introduces new features that adapt content to available space and intelligently size and position items within a grid container. This supports responsive design and makes it easier to create layouts that work in a variety of different browser sizes, without the use of media queries. 10 stepsGoing Further with Grid Layout
Learn alternate methods for positioning items on the grid, and tools, features and concepts that will make you a stronger developer of grid layouts. 7 steps