From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Grid lines and units

Grid lines and units - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Grid lines and units

- [Instructor] With the grid container defined, we can start declaring grid lines to create columns and rows. This is done using the grid template columns and grid template rows properties. Each of these properties takes lists of values separated by spaces that set the column or row width or height by declaring the width or height of the space between one line and the next one. Let me show you what I mean. In the browser right now, the grid has one column that spans the full width of the grid, with column grid line one being the left edge and column grid line two being the right edge. To split this space here inside the grid into two equal width columns, I'll go to my CSS and declare grid, template, columns, and then say 50% and 50%. Save that, and in the browser, you now see we have an additional grid line. So we have grid line one, the left edge, then we have grid line two, which is now in the middle, and grid line three, on the right edge. And that's exactly what's happening here…

Contents