我正在努力做到这一点：得到“固定”的网格的3个连续行;“但我有问题，idk。这里是我的代码：

.main-container {
  
    display:grid;
    background-color:#e0e0e0;
    grid-template-columns: 50% 50%;
    box-sizing:border-box;
        z-index:-1;
  
}
.main-container > * {
   text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
    
  
}
.main-container div {
    color:black;
    border: px solid black;
    
}
.main-container video {
    display:block;

    width:100%;
    height:100%;
    
    /* Scale video to container size */
   object-fit: cover;
   object-position: center;
    z-index:10000;   
}
.main-container h4 {
    color:#edbd87;
}

.item1{
    grid-column: 1 / 3;
    background-color: green;
    height:1080px;

}
.item2{
    right:0;
    left:0;
    top:300px;
    bottom:0;
    position:absolute;
    grid-column: 1 / 3;
    display:inline-block;
    z-index:1000000;
}

.item3{
    background:#e0e0e0;
    grid-column: 1 / 3;
    height:40vh;
    border-bottom:1px solid black;
        
}

.item4 {
    padding:30px;
   z-index:10;
    width:100%;
    height:800px;
}
.item4 img{
    padding:15px;
    justify-self:center;
    
     display:block;
    width:90%;
    height:80%;
    
    /* Scale video to container size */
   object-fit: cover;
   object-position: center;
    border-radius: 80px 20px;
    z-index:10;
}
.item5{
    padding:40px;
    width:100%;
    display: inline;
    z-index:9;
}
.item5 *{
    padding:20px;
    font-weight:bold;
    font-size: 300%;
}
.item5 p{
    margin-top:30px;
    padding:40px;
    font-weight:bold;
    font-size: 180%;
}
.item5 h4{
    margin-top:40px;
    font-weight:bold;
    font-size: 640%;
}

<?php get_header(); ?>

<div class="main-container">

        <div class="item1">
            <video id="vid" src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/coffee1.mp4" width="1920" height="1080" autoplay loop muted type="video/mp4"> </video>
        </div> 
        <div class="item2">
            <p style="font-size:50px; color:white;"> Join Us! </P>
            <button type="button" class="btn btn-outline-warning" style="font-family:forum; font-weight:bold; background-color:transparent; border-radius: 3px; color:yellow; font-size:50px; border: 2px solid yellow;">Warning</button>
        </div>
        <div class="item3">
            <img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/logo.png" />
        </div>
        <div class="item4">
        <img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan2.jpg" />
        </div>
        <div class="item5">
            <h4>WHO WE ARE?</h4>
        <p>
            ArvanJobs is above all peace of mind. It is a new way 
            of working, of traveling, of training, of advancing in 
            your career. Whether you are a company looking for 
            workers or you are looking for a new job 
            opportunity, ArvanJobs will always be by your side, 
            selecting the best workers and the best companies 
            that will boost your career.
        </p>
            </div>      
        <div class="item6">
        <h4>WHY WORK WITH US?</h4>
        <p>
            For our personal treatment, our advice, and above 
            all for our experience working in hotels in 
            numerous countries.
            Because we know how difficult it is to take that step 
            of daring to work in a foreign country. Because we 
            know how hard it is to find the right staff.
        </p>
        </div>
        <div class="item7">
            <img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan4.jpg">
        </div>
        <div class="item8">
            <h4>HOW WE WORK?</h4>
            <p>
All candidates are interviewed by staff who have 
worked in hotels, not offices
The same happens with our clients who have to 
satisfy a series of criteria and guarantees for the 
worker to work with us.</p>
        </div>
        <div class="item9">9</div>
        <div class="item10">10</div>
        
        
</div>

<?php get_footer(); ?>

我想修复.item4和.item5（它们在一行中，有2列），并将该行重复3次，使其相同（具有diff内容）。我想修复所有3行。问题是，当我将位置固定在任何.items中时，事情变得疯狂。
我上传了一张图片来澄清自己，抱歉：

在那里你可以看到3行，我希望3行被固定，或至少图像被固定，当我向下滚动，第二行将覆盖第一行，然后第三行将覆盖第二行。我喜欢这种“diapositive”的效果。