Understanding Grid

[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