Episode 05 • Frontend Tips

CSS Grid Layouts - One Third + Two Thirds

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.

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.

Download code

Wanna ask a question about this video?

Like This Video?

Consider supporting me on Patreon.

...or you can share this video, that also helps ;)

  • Episode 01 • Duration 23:08

    Using Laravel Elixir With WordPress

  • Episode 02 • Duration 16:13

    Introduction To CSS Grids

  • Episode 03 • Duration 24:47

    Introduction to Pattern Lab

  • Episode 04 • Duration 16:56

    Smashing Magazine + Netlify. What's the Big Deal?

  • Episode 05 • Duration 16:34

    CSS Grid Layouts - One Third + Two Thirds

  • Episode 06 • Duration 16:27

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

  • Episode 07 • Duration 23:59

    CSS Grid Layouts - Gridify My Site

  • Episode 08 • Duration 19:37

    Organising JavaScript

  • Episode 09 • Duration 04:41

    One Language Every Programmer Should Know

  • Episode 10 • Duration 13:59

    WP REST API - Custom Endpoints

  • Episode 11 • Duration 08:03

    WP REST API - Custom Post Types And Fields

  • Episode 12 • Duration 19:55

    WP REST API - Custom Filters

  • Episode 13 • Duration 13:09

    WP REST API - Add Posts From Frontend

  • Episode 01 • Duration 23:08

    Using Laravel Elixir With WordPress

  • Episode 02 • Duration 16:13

    Introduction To CSS Grids

  • Episode 03 • Duration 24:47

    Introduction to Pattern Lab

  • Episode 04 • Duration 16:56

    Smashing Magazine + Netlify. What's the Big Deal?

  • Episode 05 • Duration 16:34

    CSS Grid Layouts - One Third + Two Thirds

  • Episode 06 • Duration 16:27

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

  • Episode 07 • Duration 23:59

    CSS Grid Layouts - Gridify My Site

  • Episode 08 • Duration 19:37

    Organising JavaScript

  • Episode 09 • Duration 04:41

    One Language Every Programmer Should Know

  • Episode 10 • Duration 13:59

    WP REST API - Custom Endpoints

  • Episode 11 • Duration 08:03

    WP REST API - Custom Post Types And Fields

  • Episode 12 • Duration 19:55

    WP REST API - Custom Filters

  • Episode 13 • Duration 13:09

    WP REST API - Add Posts From Frontend