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 ...