CSS Grid is a set of CSS properties for building 2-dimensional layouts. The main idea behind CSS Grid is that we divide a container element into rows and columns that can be filled with its child elements. In 2-dimensional contexts, CSS Grid allows us to write less nested HTML and easier-to-read CSS. A common misconception about CSS Grid is that its meant to replace Flexbox; instead, Flexbox and CSS Grid work perfectly together. Just remember one thing: If you need a 1-dimensional layout, use Flexbox; if you need a 2-dimensional layout, use CSS Grid.
And now for a little cheat-sheet of CSS Grid elements: