Basics of CSS Grid -1

As i have written in my previous blog on flexbox, that it helped me get out of the bootstrap trap. I also use another new addition to CSS, which is know as grid. It is an awesome system which can be used to develop the whole website.

I generally use a combination of flexbox and Grid in my projects. CSS grid can divide the whole page into columns and rows easily and there are many ways in which you can place the elements.

The best resource to quickly reference Grid this article on CSS tricks.

And then there is this awesome free tutorial from Wes Bos. This blog series is also inspired and based upon that series.

I will be using this codepen for the tutorial.

Let first have some divs with class items inside a div with class container. As, you have assumed, the container will be Grid and the items will be it’s children.

You can read the rest of the blog from my site. Link for the same is below.

Check part-2 here.