I am not able to get the CSS-Grid-Template-Areas to work. Any ideas?

Question

I have used random text for the text as dummy text. Please tell me where I am going wrong. I am trying to use different categories for for the grid-area-templates, and, when I try to enter them one by one, it works, but, when I do it individually, it does not work. Also, it ONLY seems to do it in a one column layout, not multiple columns.

body{
    background-color: beige;
}

main{
    background-color: white;

  overflow: clip;
    word-wrap: break-all;
 width: 100%;

}



.grid1{
  display: grid;
grid-template-columns: 400px 400px;

max-width: 800px;
    -moz-grid-template-areas: 

         "Content1 Content1"
        "Header Footer"
        "Footer Footer"
        ;
    word-wrap: break-word;
    overflow: hidden;
  }


.Content1{
    grid-area: Content1;
}

.Header{
    grid-area: Header;
}

.Footer{
    grid-area: Footer;
}

<!Doctype HTML>
<html>
<head>
<link rel="stylesheet" href="../CSS/stylesheet.css">

</head>
 <body>
<main class="grid1">
    <section class="Header">

<P>
MailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMail 

    </P>
        </section>

        <section class="Content1">
<P>
Blargh blargh blargh blargh blargh blargh blargh blargh blargh blarghBlargh blargh blargh blargh blargh blargh blargh blargh blargh blarghBlargh blargh blargh blargh blargh blargh blargh blargh blargh blarghBlargh bla 
    </P>
        </section>

        <section class="Footer">
<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>

<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>
<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>
                </section>
</main>
    </body>
</html>

It was a misunderstanding and misapplication of the use of the grid. I believe that I got rid of the use of the -moz- prefix later. — user129963, Jul 31 '20 at 21:32

score 0 · Answer 1 · answered Jul 31 '20 at 21:31

This is the answer that I came up with to my CSS grid issue, please review it? I think that I've figured it out, I just want someone who has a bit more experience review it to make sure that it is being done the right way.

<!Doctype HTML>
<html>
<head>
<link rel="stylesheet" href="../CSS/stylesheet.css">
                                                  
</head>
 <body>
<main class="grid1">
    <section class="Header">
       
<P>
MailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMailmavMail 
 
    </P>
        </section>
    
        <section class="Content1">
<P>
Blargh blargh blargh blargh blargh blargh blargh blargh blargh blarghBlargh blargh blargh blargh blargh blargh blargh blargh blargh blarghBlargh blargh blargh blargh blargh blargh blargh blargh blargh blarghBlargh bla 
    </P>
        </section>
    
        <section class="Footer">
<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>

<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>
<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>
                </section>
    

        <section class="Post1">
<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>

<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
            </P></section>
    
    
        <section class="Post2">
<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>

<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>
    </section>
    
    
        <section class="Post3">
<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>

<P>
JS JSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJSJS      
    </P>
    </section>
</main>
    </body>
</html>

body{
    background-color: beige;
}

main{
    background-color: white;
    
  overflow: clip;
    word-wrap: break-all;
 width: 100%;
 
}

 
 
.grid1{
  display: grid;
grid-auto-columns: minmax(6, 3fr);
    grid-auto-columns: minmax(100px, auto);
 
max-width: 800px;
    grid-template-areas: 
    "Header Content1 Footer" 
    "Post1 Post2 Post3"
        
 
        ;
    word-wrap: break-word;
    overflow: hidden;
  }
  
 
.Content1{
    grid-area: Content1;
}

.Header{
    grid-area: Header;
}

.Footer{
    grid-area: Footer;
}

.Post1{
    grid-area: Post1;
}

.Post2{
    grid-area: Post2;
}

.Post3{
    grid-area: Post3;
}

Does it work? Then you did it correctly. The reason your first example didn't work is because template areas don't work across several groups. Your `"Header Footer" "Footer Footer"` wouldn't work. If you change it to `"Header Header" "Footer Footer"` you would see it working. Also, answers shouldn't be used for us to code review. — disinfor, Jul 31 '20 at 21:34
Fair enough. The code works for me, as someone who is just getting into CSS3, I wanted someone else to verify that it was the right answer. But, I felt pretty comfortable posting it as the right answer to my question. It sounds like with my previous example the grouping was too complicated, but, in this example, I had enough columns in order to make the grids work, which, helps me see how powerful that CSS grids actually are. — user129963, Jul 31 '20 at 21:41
@user129963 I think you need to do a bit more research into how the different grid properties work. If this solves your issue, that's great but it's of no use if you don't know how it works — Daniel_Knights, Jul 31 '20 at 21:44
Thanks for the advice. I will definitely review the concepts more and get more familiar with it. In the meantime, I understand how to manually set the grid-column and grid-row property if I need to the numerical method followed by the /. So, I think that should help, if I can't fully get the grid-area method, I might as well just do it that way. — user129963, Aug 02 '20 at 01:40

I am not able to get the CSS-Grid-Template-Areas to work. Any ideas?

1 Answers1