CSS Grid Changes Everything

By: (plus.google.com) +David Herron; Date: August 9, 2017

Tags: Git

Getting web content to layout as you want usually results in messy HTML and messy CSS. Limitations of both usually means you're nesting DIV's to get a structure where you can use various arcane CSS paradigms like absolute or relative positioning. CSS Grids changes all that. You can use simple HTML markup accompanied by straight-forward CSS rules to lay it out. It's a breath of fresh air. It's supported in ALL the modern web browsers.

Why not flexbox? Isn't that the thing that's supposed to be our page layout savior? The problem with flexbox is it runs in only one direction. For more complex layouts you need to nest flex containers. CSS Grid is a two-dimensional layout system and can handle more complex layouts.

Traditional CSS methodology, as well as flexbox, works from the content outward. CSS Grid works from the layout inward.