根据列宽添加新的拟合行？

Question

我有这个代码，其中只有一列有三个不同的行适合视口。每行将包含一个适合身高的图像。我想这样做，以便如果浏览器水平调整大小，并且该列（视口）的宽度低于某个点，则在页面上插入额外的行，这也适合视口。因此它会从三行拟合到四行，然后是五行，依此类推，具体取决于一列/视口的宽度：

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <title>TEST SITE ONE</title>
    <meta name="description" content="Test Site">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="main.css">

    <style>

        html {
          box-sizing: border-box;
        }

        *, *:before, *:after {
          box-sizing: inherit;
        }

        * {
            margin: 0px;
            padding: 0px;
        }

        body{
        display: block;
        }

        #page1{
            background-color: aquamarine;
            display: block;
            width: 100vw;
            height: 100vh;
            max-width: 100%;
            max-height: 100%;
        }

        .grid-container{
            display: grid;
            height: 100%;
            grid-template-rows: repeat(3, 1fr);
        }

        .grid-items{
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid black;  
        }

        .slot-image{
            height: auto;
            width:auto;
            max-height: 100%;
            max-width: 100%;
        }

    </style>

</head>



<body> 
    <section id="page1">
        <div class="grid-container">
            <div class=grid-items>
                <img class="slot-image" src="WC%20Sov%20edit.png" alt="sov">
            </div>
            <div class=grid-items>image</div>
            <div class=grid-items>image</div>
        </div>

        <div class="grid-container">
            <div class=grid-items>
                <img class="slot-image" src="WC%20Sov%20edit.png" alt="sov">
            </div>
            <div class=grid-items>image</div>
            <div class=grid-items>image</div>
        </div>     
    </section>
</body>

</html>