Information Tutorials

Native Css Grids – You Must Know

native css grids
Reading Time: 4 minutes

native css grids

People first used to align their web page using tables. We know it is pathetic to style your page using tables. Then CSS came. CSS brings the extremely powerful floating system to keep the things tidy. We all know about the powerful flex-boxes. They are great and they will be. Modern web development is based on different popular libraries like bootstrap and foundation. Almost all the popular libraries implement their own grid systems. They do it using perfectly calculating the necessary widths of each divs. Now the wait is over. Native CSS Grids are there for you to help you out. If you are using Chrome 57 then you can test it out right now. It is brand new and exciting feature. Let’s know more about native CSS grids and how to use them.

Introduction of Native CSS Grids

Here I will try to put one extremely easy and useful example based upon Native CSS Grids. There are a lot of options you can start to play with. But I will try to keep my example super easy so that you can explore your own. Let’s start with a blank index.html. In the file let’s give some demo markup.

There is nothing fancy going on. I just have declared few divs in two wrappers. In the recent implementation of web standards, we have a new CSS display property that is grid.

How Native CSS Grids Work

Basically, we need to declare the display property to be a grid and tell the children of the grid how to behave. Enough talking lets see some CSS code.

Here we are just instructing our parent classes to have the grid display property. Now we will tell the children of the

In this example web page, we are planning to have a single grid as a heading. Then we will have a three column structure followed by a two column structure.

Now we will tell the children of the heading class to always have a full-width. That means for each row there can be maximum one single grid. We can achieve this via grid-template-columns.

You may wonder what is this 1fr stands for. “Fr” stands for a fraction. So the repeat method takes the first argument to be how many columns you want to have and the second argument is the width of the column. For width, we are using this magical fr to take up the whole available space. Now we will give a two column and three column structure for the rest of the content.

As you can see now repeat method takes respective 2 and 3 to give our desired result. Let’s have a look out our file right now. Open it in a browser. It works like a charm. Cool ☺.
Native CSS Grids

Responsive Design using Native CSS Grids

Making our grids responsible is our prime responsibility in this mobile first world. To do so, we need to add a simple media query where we will ask CSS to have a single grid for each row for all the wrappers.

All the source code of this simple demonstration of native CSS grids is available here. Thank you for reading this article. Make some brilliant out of it.

One thing to be noted, as of now only 31% of the web supports Native CSS Grids, so I suggest you not to use this in production though there are some polyfills out there.

2 thoughts on “Native Css Grids – You Must Know”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.