To be able to understand what css grid is, it is best to know what it is not. Well, it is not a html element, that I give you for free.
The other important thing which it is not, is that it is not a bullet to solving all your css responsive issues.
So, what is it? Css grid is just like any other css attribute. However, this is an understatement, because it is more than that.
It is a means to providing flexibility and predictability when laying out your content, either with the aim of responsive design, or pixel perfect design.
First you will have to know what a css grid system. This grid system is a way by which a web page is divided into a number of columns and rows, waiting for content to be painted on them.
Think of it as a canvas, divided into columns and rows, awaiting for the brush to get into action.
Css grid system makes it possible to have equal, varying or dynamic columns or rows on a web page, but this is beyond this introduction.
It is with this ability that you can go a step further and build css grid responsive website, and we will get onto this maybe in a later tutorial.
Any grid system has columns and rows. The columns are vertical splits on a page, while the rows are horizontal splits on a page.
This way you can define how you want your items placed horizontally or vertically on the css grid system.
So, how about building a responsive css grid? Well, that is where media queries come into the picture.
With the combined effort of media queries and css grid, it is possible to build fully responsive websites that can adapt, look and feel different in a number of platforms.
So, always remember:
Finally, all the best and feel free to check out the next episode of this awesome series! Until next time!