CSS Grid Layout: Usability & Ease Of Building Websites Is About To Increase!

CSS Grid Layout Is Coming On All Major Browsers!
CSS Grid Layout Is Coming On All Major Browsers!

CSS Grid Layout is probably the most powerful stuff introduced in CSS. CSS Grid Layout is being implemented rapidly in all major browsers. Opera 43, FireFox 52, Chrome 57 and Safari Technology Preview has full support, so in a year this is going to be big. Better start learning now!

"Can I Use" Screenshot For Grid Layout (For Safari Still not Updated)
“Can I Use” Screenshot For Grid Layout (For Safari Still not Updated)

(Warning: All the demos work right now only in Grid Layout supported browsers. Chrome 57, Firefox 52 & Opera 43)

Here, I will demonstrate a few basic stuff which will show the power of Grid Layout. In this first example, the .container has set following properties for making grid layout to work :

display: grid;
grid-template-columns: 24% 50% 24%; 
grid-gap: 1%;

The first CSS rule display: grid; sets the .container to become the grid layout container. There are three ways to set grid layout:

display: grid /* block level element */ |
         inline-grid /* inline element */ |
         sub-grid; /* When you need a grid inside grid */

The second rule grid-template-columns gives the width to the elements inside the grid and it is also repetitive. So, in this example we are giving grid-template-columns: 24% 50% 24%; which means first element will be having 24% width, second element will be having 50% width, third element at 24% width and then again fourth element will have have 24% and so on ..

The third rule grid-gap which pretty much says it for itself, it declares the gap between rows and columns.

grid-gap: <'grid-row-gap'> <'grid-column-gap'>;

Go ahead and experiment with these values:

More on controlling the items inside the container, we will need the following CSS rules:

grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;

These properties can override the width set in grid-template-columns, also it can make elements overlap each other but its main use is placement of elements. You can dictate where you want a certain element and on which column and row you want to start and where you want to end them.

Play around with below Codepen and get yourself familiarized with it:

One more solid example of CSS Grid Layout:

Future of Web Design is getting easier! 🙂

More on further reading of Grid Layout: GridByExample, I found the CSS-Tricks article unusually complex and difficult to read but here’s the link and more on MDN! Lets do this!

Be the first to comment

Leave a Reply

Your email address will not be published.