Understanding CSS Grid

Published on Oct 12, 2023 • 5 min read

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay out items in rows and columns. It has the ability to control the sizing and positioning of boxes and their contents with great precision.

Why Use CSS Grid?

Before Grid, we used floats, positioning, and inline-block to lay out our pages. Then Flexbox came along, which is great for one-dimensional layouts (either a row or a column). CSS Grid is the first CSS module created specifically to solve the layout problems we've all been hacking our way around for as long as we've been making websites.

Basic Concepts

To get started, you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid.

It is incredibly powerful and allows for complex responsive layouts without the need for heavy frameworks.