Grid Concepts and Terminology1:47 with Guil Hernandez
Before you begin building layouts with CSS Grid, you should understand some of the concepts and terminology behind it.
Before you begin building layouts with CSS Grid, 0:00 you should understand some of the concepts and terminology behind it. 0:02 I'm going to be using the terminology and 0:06 concepts covered in this video throughout the course, so pay close attention. 0:08 You may even wanna write them down to help remind you what they mean 0:12 as you watch the videos later in this course. 0:15 The two most important elements in CSS Grid Layout are grid containers and 0:17 grid items. 0:22 The first step to using grid is defining a grid container. 0:23 The grid container establishes the grid formatting context and 0:27 manages how its direct child elements are spaced, sized, and aligned. 0:31 When you create a grid container, 0:35 all direct children of that element become grid items. 0:37 And there can be any number of grid items inside the grid container. 0:40 For example, in this code, the main element is a grid container, and 0:44 its direct children, the article elements, are grid items. 0:48 If you nest other elements like headings, paragraphs, and 0:52 images inside the main element, they become grid items too. 0:55 Once you've established the grid formatting context, 0:59 you can start positioning and aligning content into a grid. 1:02 And the grid is formed by an intersecting set of horizontal and 1:05 vertical lines called grid lines. 1:09 Grid lines divide the grid container space into columns and 1:11 rows, or the areas into which grid items are aligned, sized, and placed. 1:15 Horizontal grid lines position the rows and 1:20 vertical grid lines position the columns. 1:23 A grid line exists on either side of a column or row. 1:25 So in other words, 1:28 the space between two adjacent grid lines forms either a column or a row. 1:30 This will all start to make more sense in the next video where you'll create a grid 1:35 using the core properties of CSS Grid. 1:39 Also be sure to have look at the helpful Grid resources I've 1:42 posted in the teacher's notes of this video. 1:44
You need to sign up for Treehouse in order to download course files.Sign up