Set a layout with grid-templates-area

Hi everyone I want realise a simple page but don't understand what is going wrong my html:

<body>
             <div class="context">

                       <div class="zero">
                                 <p>we</p>
                           </div>
                                  <div class="un">
                                        <p>create</p>
                                 </div>
                                      <div class="deux">
                                            <p>digital</p>
                                     </div>
                                  <div class="trois">
                                        <p>solutions</p>
                                 </div>   
                                 
                                 

             </div>
</body>

<body>
             <div class="context">

                       <div class="zero">
                                 <p>we</p>
                           </div>
                                  <div class="un">
                                        <p>create</p>
                                 </div>
                                      <div class="deux">
                                            <p>digital</p>
                                     </div>
                                  <div class="trois">
                                        <p>solutions</p>
                                 </div>   
                                 
                                 

             </div>
</body>

my CSS:

.content{
    height: 100vh;
    display: grid;
    grid-template-areas: ". first . . . . . ."
                         "un . . . . . . ."
                         ". . . . . . . deux"
                         ". . trois . . . . .";
    grid-template-columns: repeat(8, 1fr);  
    grid-template-rows: repeat(4, 1fr);                  
}


.zero{
    grid-area:first;
}

.un{
    grid-area: un;
}

.deux{
    grid-area: deux;
}
.trois{
    grid-area: trois;
}
p{
    font-size: 6em;
    text-transform: uppercase;
    font-family: verdana;
}

.content{
    height: 100vh;
    display: grid;
    grid-template-areas: ". first . . . . . ."
                         "un . . . . . . ."
                         ". . . . . . . deux"
                         ". . trois . . . . .";
    grid-template-columns: repeat(8, 1fr);  
    grid-template-rows: repeat(4, 1fr);                  
}


.zero{
    grid-area:first;
}

.un{
    grid-area: un;
}

.deux{
    grid-area: deux;
}
.trois{
    grid-area: trois;
}
p{
    font-size: 6em;
    text-transform: uppercase;
    font-family: verdana;
}

Thanks by advance.

3 Replies

Jochem•13mo ago

your div has class context, your css has class content I made a quick codepen with this, and tried to use the inspector to look at how the grid layout was getting set up. the wrapper div didn't have display: grid on it, despite it being set in the CSS, so I checked the classnames (for future questions, it's probably a good idea to include that codepen yourself, it took 10 seconds to set up, and to describe the issue you're having in a sentence or two)

Pat66•13mo ago

Jochem•13mo ago

as always, glad to help 🙂

Gaming

Programming

Set a layout with grid-templates-area