Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
CSS Grid Layout lets you simplify your HTML, so you can write simpler markup and rely just on CSS to control your page's design.
Grid Resources
- Grid by Example - Rachel Andrew
- Intro to CSS Grid - Jen Simmons
- CSS Grid Layout - MDN
- Relationship of grid layout to other layout methods
- Follow Jen Simmons and Rachel Andrew for more resources about Grid Layout
-
0:00
[MUSIC]
-
0:04
Grids, which provide an orderly structure of rows and columns,
-
0:08
are fundamental to the design of layouts.
-
0:10
They keep your content organized, help you decide where content should be placed, and
-
0:15
determine the positioning and balance in a layout.
-
0:18
In the past, we've relied on CSS frameworks and legacy methods,
-
0:21
like tables, inline blocks and
-
0:23
floats to work around the limitations of CSS layout and create grid based designs.
-
0:29
Well, the grid layout model for CSS lets us skip these workarounds
-
0:33
by bringing properties that were created specifically for webpage grid layouts.
-
0:38
I'm Gil, a front end developer and teacher here at Treehouse.
-
0:41
Welcome to the exciting era of CSS Grid Layout.
-
0:44
In this course, you'll begin learning the most powerful layout system in CSS.
-
0:48
Grid provides a set of properties, functions, and flexible units that let you
-
0:52
control the sizing, positioning, and spacing of content.
-
0:55
And grid lets you build layouts faster and
-
0:57
more easily than any layout tools web designers relied on in the past.
-
1:01
If you've been building web pages for awhile, you may have used a CSS framework
-
1:05
or created a grid using markups similar to this.
-
1:09
Then you used CSS to manage the size, position, and
-
1:12
spacing of each component in the grid.
-
1:15
Grid layout lets you skip the need of creating markups,
-
1:18
specifically intended to create a grid.
-
1:20
Instead, you use CSS to define flexible columns and rows.
-
1:23
Grid is your layout system.
-
1:26
You may already have some experience with Flexbox another CSS Layout feature.
-
1:30
Well, Flexbox is still a great tool but it has a different purpose than grid layout.
-
1:35
You see, Flexbox is a one-dimensional layout tool, meaning it aligns content and
-
1:40
distributes space along a single axis, either a row or a column.
-
1:44
Grid layout, on the other hand, is designed for two-dimensional layout.
-
1:48
This two-dimensional layout system lets you control the sizing, positioning, and
-
1:53
spacing of rows and columns at the same time.
-
1:56
When you declare a grid, your content adapts to fit the size of the columns and
-
2:00
rows you've defined.
-
2:02
CSS Grid and Flexbox each have their specialties, and can be used together to
-
2:06
give you more power and flexibility than ever before over layout.
-
2:10
Designers and developers are using CSS Grid to layout major sections of content
-
2:15
like the creative list of speakers on this site or
-
2:18
to build smaller user-interface elements like responsive forms and media objects.
-
2:22
Some even design their entire site layout using grid.
-
2:26
You can view more examples of CSS Grid layouts and production,
-
2:29
including wonderful experimental grid layouts by developer Jen Simmons, and
-
2:33
the links posted in the teacher's notes.
-
2:35
So coming up in this course, I'll teach you the essentials you need to get started
-
2:38
building layouts in ways that weren't possible before with CSS Grid.
You need to sign up for Treehouse in order to download course files.
Sign up