grid tamplate rows

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>grid tamplate rows </title>

    <style>

        .grid{

            display: grid;

            grid-template-rows: 1fr 6fr 2fr;

            grid-gap: 1rem;

            grid-template-columns: 1fr 4fr 2fr;

            grid-template-columns: repeat(5, 1fr);

            /* grid-auto-rows: 5fr; */

        }

        .item{

            background-color: #3084e4;

            border:2px solid red;

        }

    </style>

</head>

<body>

    <div class="grid">

        <div class="item">item-1</div>

        <div class="item">item-2</div>

        <div class="item">item-3</div>

        <div class="item">item-4</div>

        <div class="item">item-5</div>

        <div class="item">item-6</div>

        <div class="item">item-7</div>

        <div class="item">item-8</div>

        <div class="item">item-9</div>

        <div class="item">item-10</div>

        <div class="item">item-11</div>

        <div class="item">item-12</div>

        <div class="item">item-13</div>

        <div class="item">item-14</div>

        <div class="item">item-15</div>

        <div class="item">item-16</div>

        <div class="item">item-17</div>

        <div class="item">item-18</div>

        <div class="item">item-19</div>

        <div class="item">item-20</div>

        <div class="item">item-18</div>

        <div class="item">item-19</div>

        <div class="item">item-20</div>

    </div>

</body>

</html>