How to name grid item and set up the grid layout by using the grid-template-areas in CSS

<!DOCTYPE html> 
<html> 
    <head> 
        <style>
            .grid-item1 {
               grid-area: gArea;
            }
            .grid-container {
                display: grid;
                grid-gap: 10px;
                /* grid-item1 will take the place of 3 columns */
                grid-template-areas: 'gArea gArea gArea';
                background-color: blue;
                padding: 10px;
            }
            .grid-container > div {
                background-color: lightblue;
                border: 1px solid;
                padding: 15px;
            }
 
        </style>
    </head> 
    <body> 
        <div class="grid-container">
            <div class="grid-item1">A</div>
            <div class="grid-item">B</div>
            <div class="grid-item">C</div> 
            <div class="grid-item">D</div>
            <div class="grid-item">E</div>
            <div class="grid-item">F</div> 
            <div class="grid-item">G</div>
            <div class="grid-item">H</div>            
            <div class="grid-item">I</div>
            <div class="grid-item">J</div>            
            <div class="grid-item">K</div>        
            <div class="grid-item">L</div>               
            <div class="grid-item">M</div>        
            <div class="grid-item">N</div>   
        </div>
    </body> 
</html>

70+ SQL courses for beginners and professionals

answered Jun 4, 2019 by avibootz
edited Jun 4, 2019 by avibootz

<!DOCTYPE html> 
<html> 
    <head> 
        <style>
            .grid-item1 {
               grid-area: gArea;
            }
            .grid-container {
                display: grid;
                grid-gap: 10px;
                /* grid-item1 will take the place of 3 columns (out of 4) */
                grid-template-areas: 'gArea gArea gArea...'; 
                background-color: blue;
                padding: 10px;
            }
            .grid-container > div {
                background-color: lightblue;
                border: 1px solid;
                padding: 15px;
            }

        </style>
    </head> 
    <body> 
        <div class="grid-container">
            <div class="grid-item1">A</div>
            <div class="grid-item">B</div>
            <div class="grid-item">C</div> 
            <div class="grid-item">D</div>
            <div class="grid-item">E</div>
            <div class="grid-item">F</div> 
            <div class="grid-item">G</div>
            <div class="grid-item">H</div>            
            <div class="grid-item">I</div>
            <div class="grid-item">J</div>            
            <div class="grid-item">K</div>        
            <div class="grid-item">L</div>               
            <div class="grid-item">M</div>        
            <div class="grid-item">N</div>   
        </div>
    </body> 
</html>

70+ SQL courses for beginners and professionals

answered Jun 4, 2019 by avibootz

<!DOCTYPE html> 
<html> 
    <head> 
        <style>
            .grid-item1 {
               grid-area: gArea;
            }
            .grid-container {
                display: grid;
                grid-gap: 10px;
                /* grid-item1 will take the place of 3 columns and 2 rows */
                grid-template-areas: 'gArea gArea...' 'gArea gArea...'; 
                background-color: blue;
                padding: 10px;
            }
            .grid-container > div {
                background-color: lightblue;
                border: 1px solid;
                padding: 15px;
            }

        </style>
    </head> 
    <body> 
        <div class="grid-container">
            <div class="grid-item1">A</div>
            <div class="grid-item">B</div>
            <div class="grid-item">C</div> 
            <div class="grid-item">D</div>
            <div class="grid-item">E</div>
            <div class="grid-item">F</div> 
            <div class="grid-item">G</div>
            <div class="grid-item">H</div>            
            <div class="grid-item">I</div>
            <div class="grid-item">J</div>            
            <div class="grid-item">K</div>        
            <div class="grid-item">L</div>               
            <div class="grid-item">M</div>        
            <div class="grid-item">N</div>   
        </div>
    </body> 
</html>

70+ SQL courses for beginners and professionals

answered Jun 4, 2019 by avibootz

Most popular tags

How to name grid item and set up the grid layout by using the grid-template-areas in CSS

3 Answers

Related questions