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.
- Grid Demo on CodePen
- Understanding the CSS Grid Layout Module
- Breaking the Grid With CSS Grid Layout
- Bringing CSS Grid Layout and Flexbox Together
- 3 CSS Grid Projects for Web Designers
- Grid by Example
- A Complete Guide to Grid
- Morten Rand-Hendriksen Presenting CSS Grid at WordCamp Europe 2017
- Basics of CSS Grid: The Big Picture
- Learn CSS Grid
- CSS Grid Layout
- CSS Grid Garden