© Joe Attardi 2020
J. AttardiModern CSShttps://doi.org/10.1007/978-1-4842-6294-8_12

12. CSS Grid

Joe Attardi1 
(1)
Billerica, MA, USA
 

We’ve looked at flexbox layouts in depth and have seen how powerful they can be. Still, there are limitations. Flexbox is a one-dimensional layout where items are arranged horizontally or vertically in rows or columns.

CSS Grid is a relatively new feature that allows you to create two-dimensional grid layouts with rows and columns. It is the most powerful layout system available with CSS today. CSS Grid enjoys wide browser support – even IE11 supports it, although its support is only partial and uses an older version of the specification.

Basic concepts

Let’s start with the basic concepts of CSS Grid.

Grid container

The ...

Get Modern CSS: Master the Key Concepts of CSS for Modern Web Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.