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.

Image for post
Image for post
The basic div

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store