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)

In this episode I'm going to show you how to create a classic layout with header, footer, one third of a sidebar and two thirds of main content using CSS Grid. After we create this layout, we are going to create a post list with one feateured post and several post around and below it.

As you will see creating something like this using CSS Grid is much easier than using something like Flex Box or regular floats.

In this mini series we are going to take a look at how we can make popular layouts that you find around the web and create them using CSS Grid.

Tutorials tagged with: css grid

Get in touch