What is CSS Grid?
CSS Grid Layout is the new layout kid on the block. It is a new CSS module that allows you to control your site layout easily and with so much more control and cleaner markup than is used currently in a lot of sites.
One of the main benefits of it is that It works in two dimensions, vertical and horizontal. Unlike flexbox which only has one dimension, horizontal. This is not to say it should replace flexbox, on the contrary. Flexbox and Grid go very well together.
How to use CSS Grid?
So, before we dive right in and start using it we need to understand how it all works. I am going to work from big items to small items here. I will also provide code examples.
At the end of these examples, you should have an understanding of how to do a standard layout consisting of a header, content, sidebar and footer.
Container
The container is just a wrapping element that should have display property set to grid. It is the very top level of the Grid. Adding this property will not change the look of the container. It is simply a root element that will tell the children how to behave.