Layout with CSS Grid

Without a doubt, the biggest game changer to CSS layout has been Grid.

We now have a layout system capable of achieving everything we have done before with less code and more predictability, as well as enabling things we simply couldn’t do before!

I’d go as far as saying Grid is revolutionary rather than evolutionary. There are entirely new concepts to understand that have no real forebears in past CSS. As such, expect to take some time getting comfortable using it.

But trust me, it is worth it. Let’s go!

In this chapter, we will learn the following:

• What CSS Grid is and the problems it solves
• The essential concepts to understand when dealing with Grid Layout
• Grid-specific terminology
• How to set up a Grid
• How to position items in a Grid
• How to create powerful responsive patterns with minimal code
• How to understand and write the grid shorthand syntax
• The latest Grid addition...