5 replies

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.

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.

Set a layout with grid-templates-area

Similar Threads

Set a layout with grid-templates-area

Similar Threads

Similar Threads

Similar Threads