Now I'm going to show you how I transformed video list on the homepage of my site to be CSS Grid. I'm doing this so that I can make that component a bit more visually appealing. 

Also you may learn something new about October CMS if you are into that type of thing :) .

In this video I'm going to be talking about using CSS Grid on my site.

CSS Grid Layouts - Gridify My Site

`grid-template-areas` is another method of laying out your CSS grid. And as you will see in the video it makes creating your grid a breeze and it also allows you to change the layout in dramatic ways when the resolution goes up or down.

In this video we are going to be talkig about grid-template-areas and as an exmple we are going to take a look at medium.com site.

CSS Grid Layouts - grid-template-areas (Medium.com Example)

Let's prepare ourselves for the upcoming new great thing in CSS, with this short introduction to CSS grids. 

You can consider CSS grids as the native implementation of the grid system that you would get with something like Bootstrap or Foundation frameworks. Of course this implementation works right from your browser without the need for anything else.

Unfortunately the support isn't there just yet - [practically none of the browsers support it at this moment](http://caniuse.com/#feat=css-grid). But the support is coming shortly, almost all major browsers will have it supported by the end of March 2017.

As I've said in the video this is just a short introduction to grids. If you want something more comprehensive [check our Rachel Andrew's website Grid by Example](http://gridbyexample.com/).

In this episode we are going to take a brief look at new CSS specification for creating native grids for your layout.

Tutorials tagged with: grid

Get in touch