feture

Use CSS variable-(grid layout)

 This is CSS sheet(grid layout)

.grid-laout{

    display: grid;

    /* grid-template-columns: 100px auto auto auto; */

    grid-template-columns: auto auto auto auto;

    /* grid-template-rows: 200px; */

    /* grid-column-gap/grid-row-gap */

    /* grid-column-gap: 10px; */

    /* grid-row-gap: 10px; */

    /* justify-content: center; */

    align-content: center;

}

.grid-laout > div{

    background-color: yellowgreen;

    border: 2px solid black;

    text-align: center;

}

.dg1{

    /* grid-column-start: 1; */

    /* grid-column-end: 4; */

    grid-column:1/3;

     grid-row: 1/3;

}

This is HTML sheet

<div class="grid-laout">

            <div class="dg1">1</div>

            <div>2</div>

            <div>3</div>

            <div>4</div>

            <div>5</div>

            <div>6</div>

            <div>7</div>

            <div>8</div>

            <div>9</div>

            <div>10</div>

            <div>11</div>

            <div>12</div>

            <div>13</div>

            <div>14</div>

            <div>15</div>

            <div>16</div>

            <div>17</div>

            <div>18</div>

            <div>19</div>

            <div>20</div>          

        </div>