Episode 06 • Frontend Tips •

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

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.

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.

Download code

Wanna ask a question about this video?

YouTube Github

Like This Video?

Consider supporting me on Patreon.

Become a patron

...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