Trouble using CSS Grid

HTML-CSS
1

Tell us what’s happening:

Dear freeCodeCamp community,
I’m currently working on one of the Responsive Web Design challenges, and to keep everything neat and organized I tried CSS Grid for the first time. I made a container class and assigned the elements in the class an area in the grid. However, it’s not really working quite yet… so I was hoping you could have a look at the code :slight_smile:

Your code so far
…

.container {
      display: grid;
      background-color: #e0e0d1;
      font-family: Verdana;
      grid-template-columns: auto 2fr auto 1fr;
      grid-template-rows: 2fr 2fr 1fr;
      grid-template-areas:
        'a a f f'
        'c c b b'
        'd d d d';
      align-items: start;
      grid-gap: 50px;
    }
...
   #header-img {
      display: grid;
      grid-area: a;
      justify-self: end;
      width: 20%;
      height: 20%;

…
…

<body>
  <div class="container">
  <header id="header">
  <img id="header-img"

…

2

Go head and share a link to your demo (i.e. codepen) and specify what’s not working well.

3

Thanks for your reply!
Here’s the link: https://codepen.io/freeCodeCamp/pen/MJjpwO

The problem is that the layout doesn’t change even if I assign elements a different area, so for example I tried bringing the video to the top (Area A) but it’s still at the bottom.
Thank you for your help,

4

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

5

Your links is a blank file.

6

Thanks for telling me… here’s the (actual) link: https://codepen.io/anon/pen/pxPEdN

7

  1. Only the direct children of the container and be placed using grid-area

  2. You are missing the quotes on class=menu (should be class=“menu”).

I would suggest checking out Wes Bos, for a tutorial on grid.

8

What works for me when working with grid and especially with the template area’s, is to name all the areas to what you want to place there and then match your html structure to the grid you have in mind. So you start big and then work you way inwards, you have to be mindful of what @lasjorg said:

So instead of this:

      grid-template-areas:
        'a a f f'
        'c c b b'
        'd d d d';

      grid-template-areas:
        'header header header header'
        'header header header header'
        '  main   main     video   video'
        '  main   main     video   video'
        'footer   footer    footer   footer';

<body>
   <div class="container">
      <header class="header"> ...
      </header>
     <main class="main"> ...
    </main>
   etc...
   </div>
</body>

Then when you have that structure you can look at items you want to place inside, you could make header a grid as well and position the image and menu etc.

Have fun discovering grid, it is really great once you get the hang of it.

2 Likes
9

Thanks a lot! Everything makes a lot more sense now