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!
(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! 🙂