feture

Use CSS variable-(grid, grid-area)

 This is CSS sheet()

/* grid variable */

.grid-cont{

    display: grid;

    grid-template-columns: auto auto auto auto auto auto;

}

.grid-cont > div{

      background-color: coral;

      border: 2px solid black;

      text-align: center;

      padding: 20px;

}

.item1{

    grid-column: 1/7;

}

.item2{

    grid-column: 1/2;

    grid-row: 2/4;

   

}

.item3{

    grid-column: 2/6;

}

.item4{

    grid-column: 6/7;

}

.item5{

    grid-column: 2/7;

}

/* grid area variable */

.grid-cont2{

    display: grid;

    grid-template-areas:

    'header header header header header header'

    'menu main main main aside aside'

    'menu footer footer footer footer footer'

    ;

}

.grid-cont2 > div{

    background-color: darkgoldenrod;

    border: 3px solid green;

    text-align: center;

    padding: 20px;

}

.item6{grid-area: header;}

.item7{grid-area: menu;}

.item8{grid-area: main;}

.item9{grid-area: aside;}

.item10{grid-area: footer;}

This is HTML sheet

 <div class="grid-cont">

            <div class="item1">Hedar</div>

            <div class="item2">Menu</div>

            <div class="item3">Main</div>

            <div class="item4">Aside</div>

            <div class="item5">Footer</div>

        </div>

        <div class="div-clear"></div><br>

        <h3>Same laout but other CSS veriable</h3>

        <div class="grid-cont2">

            <div class="item6">Hedar</div>

            <div class="item7">Menu</div>

            <div class="item8">Main</div>

            <div class="item9">Aside</div>

            <div class="item10">Footer</div>

        </div>