Grid areas reassign values instead of making it switch places

I have following CSS code:

 .container-main {
  width: 100%;
  display: grid;
  grid-template-areas: 
  'brand egg'
  'cup aud'
  'gd pg';
 }

 .container-main {
  width: 100%;
  display: grid;
  grid-template-areas: 
  'brand egg'
  'cup aud'
  'gd pg';
 }

This code has my markup for desired two columns three rows grid, works out just fine. However, in my media query I want them to switch places and become one column grid, like this:

  .container-main {
    grid-template-areas: 
    'egg'
    'brand'
    'cup'
    'aud'
    'gd'
    'pg';
  }

  .container-main {
    grid-template-areas: 
    'egg'
    'brand'
    'cup'
    'aud'
    'gd'
    'pg';
  }

But instead of switching places, it just reassigns the values. The one that supposed to be brand becomes egg and so on. What is wrong with my layout? I watched Kevin's tutorial on grid and picked it up there, but apparently I'm doing something wrong.

9 Replies

Mannix•2y ago

did you assigned those names to the children of the grid ?

Aleksandr M.•2y ago

I didn't. Do I have to? I don't think Kevin did this in his grid video.

Mannix•2y ago

how else the browser is suppose to know what to place where he definitely did if you use the areas you need to specify which area is which

Aleksandr M.•2y ago

Huh, I thought the initial markup before the media query actually provides browser with information. Do I have to do that with grid-area property for each of the children?

Mannix•2y ago

yes if you want to reorder them

Aleksandr M.•2y ago

I've seen how Kevin does it in this part of the video (timecode attached): https://youtu.be/rg7Fvvl3taU?t=1778 He firstly initialized his values in grid-template-area, and then just reordered them in a media query, so that's why I thought you could do that do. Or perhaps you can't really do that in my case? Or I just wasn't attentive enough.

Kevin Powell

YouTube

Learn CSS Grid the easy way

It can be easy to get bogged down in how grid works, with a lot of new properties, values, and even units! So let's try and simplify things as much as possible, because to get started, you don't need to know everything about how Grid works. 🔗 Links ✅ The GitHub repo: https://github.com/kevin-powell/learn-grid-the-easy-way ✅ More videos on gr...

Mannix•2y ago

same video https://youtu.be/rg7Fvvl3taU?t=1993

Kevin Powell

YouTube

Learn CSS Grid the easy way

Aleksandr M.•2y ago

Thanks for pointing that out! I wasn't attentive enough after all. Thank you for all the tips!

Mannix•2y ago

Good luck thumbup

Gaming

Programming

Grid areas reassign values instead of making it switch places