In this tutorial I will give you some insights into the future of CSS. With CSS Grid Layout – display: grid you will have more control over your layouts. You can forget the rather confusing float or inline-block systems of CSS. With display: grid design and structure is even better separated.

This tutorial is not a complete guide to this new feature, but will give you the ability, to experiment with the grid layout and explore it on your own.

As always I am using the great JSBin tool to visualize this CSS feature:

www.jsbin.com

If You need more info I advice you:

http://gridbyexample.com/examples/

https://css-tricks.com/snippets/css/c… (just partly working in Chrome)

http://www.w3.org/TR/2015/WD-css-grid…

With current Chrome compatible properties:

https://rachelandrew.co.uk/archives/2014/06/27/css-grid-layout-getting-to-grips-with-the-chrome-implementation/

Thanks for watching, I am looking for your comments.

Phillip from webstudio