Preview
Video Player
00:00
00:00
Understanding Grid
2:42CSS Grid Layout lets you simplify your HTML, so you can write simpler markup and rely just on CSS to control your page's design.
[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 Guil, 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