From the course: CSS Fundamentals: Unlock the Power of Web Styling

Unlock the full course today

Join today to access over 24,800 courses taught by industry experts.

Understanding how the CSS Grid works

Understanding how the CSS Grid works - CSS Tutorial

From the course: CSS Fundamentals: Unlock the Power of Web Styling

Understanding how the CSS Grid works

- [Instructor] CSS Grid is a newer CSS specification that gives us the most powerful way yet to control page layouts. Unlike Flexbox, CSS Grid is a two-dimensional layout system. This allows developers to place HTML elements in a Grid based layout using both rows and columns simultaneously. With Grid, we can apply a Grid to a container and then put content wherever we want within that Grid. Completely independent of semantic HTML markup. Very cool. It's the equivalent of a print based Grid layout with the flexibility of responsive design. So let's take a look at some basic CSS Grid concepts and terminology. So a Grid is an element with its display properties set to Grid. Grids have rows, and those are horizontal lines, and columns, which are the vertical lines. Next we've got Grid lines. Grid lines are the lines that make up the Grid and they can be horizontal or vertical. And a Grid track is the space between two Grid…

Contents