In this article I'll simplify grid in a way that by the end of the article you are able create a beautiful web template for you.

What is Grid ?

CSS Grid is a powerful tool that allows you to create two-dimensional layouts to be created on the web layouts.

Does Grid Support in all Browser?

Ohh yes.

• Chrome - full support as of March 8, 2017 (version 57)
• Firefox - full support as of March 6, 2017 (version 52)
• Safari - full support as of March 26, 2017 (version 10.1)
• Edge - full support as of October 16, 2017 (version 16)
• IE11 - no support for current spec; supports obsolete version.
• IE10 - no support for current spec; supports obsolete version.

Today We'll be learning by doing Right. I think that's the better way of learning anything.

Image

It's Out Target We will achieve this by simplifying grid. :)

This is our Starter Html we will be playing around with it to reach our goal.

Note

A grid container contains grid items. Wrapper is a parent class and the inside classes are child elements.

Just some weird things happening, isn't it ? And why I'm using fraction?

If you see the above Image, You'll get an Idea there are 5rows and 4 columns.

Make class "a" start on column 1 and end before column 2.
Make class "a" start on row 1 and end before row 2.

• Green: Rows
• Red: Columns

We are suppose to achieve somethings but we are ended up getting some thing. Because grid system is smart enough to auto-place things in the grid. This is we called Implicit Grid.

Yeah ! We manage to get Something so close.

Final Grid

How did I manage to make things accurate ?

Because of two things
First one
The extension name is Web Developer toolbar that helped me to measure the image accurately.
Second one is
grid-template-rows: 170px 210px 61px 61px;
grid-template-columns: 124px 376px 42px;

If you see the attribute I'm only giving height and width of each child Element. If there are multiple rows or columns that I'm not specifying the height or width. As it's a Implicit Grid it'll takes up space automatically.

Let me know in the comments if you found this helpful.