CSS 网格区域由于某种原因不起作用？

Question

我正在尝试解决这个我忽略的简单问题，我希望有人可以帮助我。

我有一个网格系统，你可以在这里看到：Grid 但由于某种原因，带有 div（id = 右侧）的 id 不会移动到 bootstrap img 幻灯片旁边的网格区域（右侧）。

*请注意，我的意思是 DESTOP 大小（媒体查询）代码可以在 CSS 的底部找到

.grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 50px 300px 1fr;
    grid-template-areas: "goback  goback" "maintext maintext" "imgslideshow imgslideshow" "overview overview"
    "rightside rightside";
}

#goback{
    grid-area: goback;
    margin: 25px 10px;
}
#goback a{
    text-decoration: none;
    color: #E3CA80;
}

#imgslideshow{
    grid-area: imgslideshow;
}

#maintext{
    grid-area: maintext;
    display: flex;
    flex-direction: column;
}

#maintext-h2{
    text-align: center;
}

#maintext-p{
    text-align: center;
}

#overview p{
    margin-top: 20px;
}

#rightside{
    grid-area: rightside;
    display: flex;
    flex-direction: column;
    text-align: center;
    border-bottom: 1px solid #0000001e;
    padding-bottom: 20px;
}

#rightside h2{
    margin-top: 20px;
    font-size: 1.1em;
}
#rightside p{
    margin-top: 10px;
    font-size: 0.9em;
}
#rightside a{
    margin-top: 20px;
    font-size: 0.9em;
}

/*
========================
MEDIA QUERIES
========================
*/

@media only screen and (min-width: 992px){
    .grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 50px 300px 1fr;
        grid-template-areas: "goback  goback" "maintext maintext" "imgslideshow rightside";
    }

    #maintext{
        align-items: center;
        justify-content: center;
    }
    #maintext-p{
        max-width: 50%;
        text-align: center;
    }
    #carouselslide{
        grid-area: imgslideshow;
    }

}

<div class="grid">
    <div id="goback">
         <a href="/index.html"><p><i class="fas fa-arrow-circle-left"></i> GO BACK</p></a>
    </div>
    <div id="maintext">
        <div id="maintext-h2" class="h2"><h2>Learning CSS Flexbox</h2></div>
        <div id="maintext-p" class="p"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium ullam est nihil mollitia distinctio, quia provident porro sed possimus illum error ducimus culpa quod quibusdam recusandae molestiae exercitationem maxime reprehenderit.</p></div>
    </div>
    <div id="imgslideshow">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img class="d-block w-100" src="https://user-images.githubusercontent.com/66082602/124394374-828d4680-dcff-11eb-86da-c391849bfd38.png" alt="First slide" >
              </div>
          </div>
    </div>
   <!-- <div id="overview">
        <p class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea ullam porro labore vero quo harum deleniti, sint corrupti nemo, neque numquam ipsam voluptates hic aperiam doloremque earum illum assumenda! Mollitia?</p>
        <p class="p">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus cupiditate dolores suscipit doloribus illo doloremque repellendus harum dolore labore ex voluptatum, animi molestias, quisquam recusandae maiores sequi aspernatur quaerat nihil?</p>
    </div>  -->
    <div id="rightside">
        <div id="role">
            <h2>Role</h2>
            <p>Learning</p>
        </div>
        <div id="timeline">
            <h2>Timeline</h2>
            <p> Nov 2021</p>
        </div>
        <div id="deliverables">
            <h2>Deliverables</h2>
            <a href="https://www.youtube.com/watch?v=n0QmD2i90_c">YouTube Video</a>
        </div>
        <div id="links">
            <h2>Links</h2>
            <a href="https://bryanroubos.github.io/testimonial-grid/" target="_blank">Live Preview</a> <br>
            <a href="https://github.com/BryanRoubos/testimonial-grid" target="_blank">Visit GitHub</a>
        </div>
    </div>        
</div>

Answer 1

你的 <div id="rightside"> 在 <div id="imgslideshow"> 里面，试着把它移出来：

.grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 50px 300px 1fr;
    grid-template-areas: "goback  goback" "maintext maintext" "imgslideshow imgslideshow" "overview overview"
    "rightside rightside";
}

#goback{
    grid-area: goback;
    margin: 25px 10px;
}
#goback a{
    text-decoration: none;
    color: #E3CA80;
}

#imgslideshow{
    grid-area: imgslideshow;
}

#maintext{
    grid-area: maintext;
    display: flex;
    flex-direction: column;
}

#maintext-h2{
    text-align: center;
}

#maintext-p{
    text-align: center;
}

#overview p{
    margin-top: 20px;
}

#rightside{
    grid-area: rightside;
    display: flex;
    flex-direction: column;
    text-align: center;
    border-bottom: 1px solid #0000001e;
    padding-bottom: 20px;
}

#rightside h2{
    margin-top: 20px;
    font-size: 1.1em;
}
#rightside p{
    margin-top: 10px;
    font-size: 0.9em;
}
#rightside a{
    margin-top: 20px;
    font-size: 0.9em;
}

/*
========================
MEDIA QUERIES
========================
*/

@media only screen and (min-width: 992px){
    .grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 50px 300px 1fr;
        grid-template-areas: "goback  goback" "maintext maintext" "imgslideshow rightside";
    }

    #maintext{
        align-items: center;
        justify-content: center;
    }
    #maintext-p{
        max-width: 50%;
        text-align: center;
    }
    #carouselslide{
        grid-area: imgslideshow;
    }

}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="grid">
    <div id="goback">
         <a href="/index.html"><p><i class="fas fa-arrow-circle-left"></i> GO BACK</p></a>
    </div>
    <div id="maintext">
        <div id="maintext-h2" class="h2"><h2>Learning CSS Flexbox</h2></div>
        <div id="maintext-p" class="p"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium ullam est nihil mollitia distinctio, quia provident porro sed possimus illum error ducimus culpa quod quibusdam recusandae molestiae exercitationem maxime reprehenderit.</p></div>
    </div>
    <div id="imgslideshow">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img class="d-block w-100" src="https://user-images.githubusercontent.com/66082602/124394374-828d4680-dcff-11eb-86da-c391849bfd38.png" alt="First slide" >
              </div>
          </div>
    </div>
   <!-- <div id="overview">
        <p class="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea ullam porro labore vero quo harum deleniti, sint corrupti nemo, neque numquam ipsam voluptates hic aperiam doloremque earum illum assumenda! Mollitia?</p>
        <p class="p">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus cupiditate dolores suscipit doloribus illo doloremque repellendus harum dolore labore ex voluptatum, animi molestias, quisquam recusandae maiores sequi aspernatur quaerat nihil?</p>
    </div>  -->
    
</div>
<div id="rightside">
        <div id="role">
            <h2>Role</h2>
            <p>Learning</p>
        </div>
        <div id="timeline">
            <h2>Timeline</h2>
            <p> Nov 2021</p>
        </div>
        <div id="deliverables">
            <h2>Deliverables</h2>
            <a href="https://www.youtube.com/watch?v=n0QmD2i90_c">YouTube Video</a>
        </div>
        <div id="links">
            <h2>Links</h2>
            <a href="https://bryanroubos.github.io/testimonial-grid/" target="_blank">Live Preview</a> <br>
            <a href="https://github.com/BryanRoubos/testimonial-grid" target="_blank">Visit GitHub</a>
        </div>
    </div>