zeek41.html and zeek41.css

 zeek41.css

.grid{display: flex;flex-direction: column;flex-wrap: wrap;}

.Explain{font-size: 10px;}

zeek41.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>CSS Grid Rows</title>

    <style>

        body{font-family: 'Playball', cursive;}

        .grid{display: grid;

        grid-template-rows: 1fr 1fr 4fr;

    grid-auto-rows: 3fr;

grid-template-columns: 1fr 8fr 1fr;

grid-gap: 1rem;

}

        .box{background-color: rgb(145, 231, 145);color: rgb(0, 0, 97);

border: rgb(255, 0, 0) solid 1px;}

        .Explain{text-align: center;}

    </style>

     <link rel="stylesheet" media="screen and (max-width:1113px)" href="zeek41.css">

     <link rel="preconnect" href="https://fonts.googleapis.com">

</head>

<body>

    <div class="grid">

        <div class="box">This is item-1</div>

        <div class="box">This is item-2</div>

        <div class="box">This is item-3</div>

        <div class="box">This is item-4</div>

        <div class="box">This is item-5</div>

        <div class="box">This is item-6</div>

        <div class="box">This is item-7</div>

        <div class="box">This is item-8</div>

        <div class="box">This is item-9</div>

        <div class="box">This is item-10</div>

        <div class="box">This is item-11</div>

        <div class="box">This is item-12</div>

    </div>

    <div class="Explain">

        <h1>ROWS AND COLUMNS</h1>

        <p>Item{1,2,3} are in <strong>same ROW</strong> of size 1r <br>

 Item  {2,5,8,11} are in <strong> same COLUMN </strong> size 8r</p>

        <p>ROW HORIZONTAL <br><br> <br>  COLUMN VERTICAL</p>

        <h1>This page is responsive at 1113px.</h1>

    </div>

    

</body>

</html>