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