[MUSIC]

Grids, which provide an orderly structure of rows and columns,

are fundamental to the design of layouts.

They keep your content organized, help you decide where content should be placed, and

determine the positioning and balance in a layout.

In the past, we've relied on CSS frameworks and legacy methods,

like tables, inline blocks and

floats to work around the limitations of CSS layout and create grid based designs.

Well, the grid layout model for CSS lets us skip these workarounds

by bringing properties that were created specifically for webpage grid layouts.

I'm Gil, a front end developer and teacher here at Treehouse.

Welcome to the exciting era of CSS Grid Layout.

In this course, you'll begin learning the most powerful layout system in CSS.

Grid provides a set of properties, functions, and flexible units that let you

control the sizing, positioning, and spacing of content.

And grid lets you build layouts faster and

more easily than any layout tools web designers relied on in the past.

If you've been building web pages for awhile, you may have used a CSS framework

or created a grid using markups similar to this.

Then you used CSS to manage the size, position, and

spacing of each component in the grid.

Grid layout lets you skip the need of creating markups,

specifically intended to create a grid.

Instead, you use CSS to define flexible columns and rows.

Grid is your layout system.

You may already have some experience with Flexbox another CSS Layout feature.

Well, Flexbox is still a great tool but it has a different purpose than grid layout.

You see, Flexbox is a one-dimensional layout tool, meaning it aligns content and

distributes space along a single axis, either a row or a column.

Grid layout, on the other hand, is designed for two-dimensional layout.

This two-dimensional layout system lets you control the sizing, positioning, and

spacing of rows and columns at the same time.

When you declare a grid, your content adapts to fit the size of the columns and

rows you've defined.

CSS Grid and Flexbox each have their specialties, and can be used together to

give you more power and flexibility than ever before over layout.

Designers and developers are using CSS Grid to layout major sections of content

like the creative list of speakers on this site or

to build smaller user-interface elements like responsive forms and media objects.

Some even design their entire site layout using grid.

You can view more examples of CSS Grid layouts and production,

including wonderful experimental grid layouts by developer Jen Simmons, and

the links posted in the teacher's notes.

So coming up in this course, I'll teach you the essentials you need to get started

building layouts in ways that weren't possible before with CSS Grid.