Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:53 minutes

Next lesson playing in 5 seconds


1.2 What Is CSS Grid Layout (a.k.a. Grid)?

Grid Layout is a new and powerful CSS layout system. It divides areas on a web page into rows and columns and then lets you position elements anywhere you want within that grid.

What’s really nice about it is the fact that the positioning is done via CSS, not HTML. So if at some point you decide to change an element’s position, you can keep the existing markup and make your changes in CSS.

This also lends itself very well to creating responsive webpages. Because you’re doing all the positioning in CSS, you can use media queries to move elements around at different screen sizes—something that was very difficult to do (if not impossible) using old layout methods.

Let’s begin by looking at a layout built with Grid.

Related Links