Php 插入视频后更改Div布局

我一直在尝试创建一个简单的公告板，在其中我可以查看不同的公告、图像和视频。每当我试图以100%的宽度和高度显示视频内容时，DIV中就会出现这个UI错误

即使我插入了一条长消息或视频，我也不希望他们向上移动或停留在他们的位置上

这是我正在谈论的一个示例图像

正如你看到的，我希望他们向上移动，因为他们在插入视频后基本上向下移动

这是我使用的代码

对于网格css，我使用了这个

<style>
.grid-container {
    display: grid;
    height: 100%;
    grid-template-columns: 1fr 1.75fr 1fr;
    grid-template-rows: 0.75fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "Logo . ." ". videos ." ". videos ." ". . ." ". . .";
}

.videos {
    grid-area: videos;
}

.Logo {
    grid-area: Logo;
}

.Welcome Text {
    grid-area: 1 / 2 / 1 / 2;
}

.Calendar {
    grid-area: 1 / 3 / 3 / 3;
}

.Posts {
    grid-area: 2 / 1 / 6 / 1;
}

.Schedule {
    grid-area: 3 / 3 / 6 / 3;
}

.Images {
    grid-area: 4 / 2 / 6 / 2;
}

.网格容器{
显示：网格；
身高：100%；
网格模板柱：1fr 1.75fr 1fr；
网格模板行：0.75fr 1fr 1fr 1fr；
网格模板区域：“徽标…”视频“.videos.”视频“…”；
}
.视频{
网格区域：视频；
}
.标志{
网格区域：标志；
}
.欢迎辞{
网格面积：1/2/1/2；
}
.日历{
网格面积：1/3/3/3；
}
.职位{
网格面积：2/1/6/1；
}
.时间表{
网格面积：3/3/6/3；
}
.图像{
网格面积：4/2/6/2；
}

为了显示整个内容，我用了这个

   <div class="grid-container">
    <div class="videos">
        <div class="row">
            <div class="col-md-12" align="center">
                <div class="card border-success">
                    <div class="card-header bg-theme"><h4 style="color: white">Video Section</h4></div>
                    <div class="card-body">
                        <div>
                            <?php
                            $value = custom_query("SELECT * FROM tbl_upload_video ORDER by RAND() DESC LIMIT 1");
                            if($value->rowCount()>0)
                            {
                                while($row=$value->fetch(PDO::FETCH_ASSOC))
                                {
                                    $id = $row['id'];

                                    ?>
                                    <?php
                                    $img = substr($row['video_path'], 6); ?>
                                    <video id="videos" autoplay>
                                        <source src="<?= $img ?>" type="video/mp4">
                                    </video>
                                <?php }} ?>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="Logo" style="max-resolution: -50px;">
        <div class="col-md-12" align="center">
            <div class="card card-accent-theme ">
                <div class="card-body">
                    <h3>INFO BOARD</h3>
                </div>
            </div>
        </div>
    </div>
    <div class="Welcome Text">
        <div class="col-md-12" align="center">
            <div class="card card-accent-theme ">
                <div class="card-body">
                    <h3 style="text-align: center">Welcome Students!!!!</h3>
                </div>
            </div>
        </div>
    </div>
    <div class="Calendar">
        <div class="col-md-12" align="center">
            <div class="card card-accent-theme ">
                <div class="card-body">
                    <h3 style="text-align: center">Calendar and other things</h3>
                </div>
            </div>
        </div>
    </div>
    <div class="Posts">
        <div class="col-md-12" align="center">
            <div class="card border-success">
                <div class="card-header bg-theme"><h4 style="color: white">Posts</h4></div>
                <div class="card-body">
                        <?php
                        $dn = datenow();
                        $value = custom_query("SELECT * FROM tbl_post WHERE date2 >= '$dn' AND type = 'Announcement' and status = 'Active' ORDER by id DESC");
                        if($value->rowCount()>0)
                        {
                        while($row=$value->fetch(PDO::FETCH_ASSOC))
                        {
                        $id = $row['id'];
                         $d2 = $row['date2'];
                         $d = $row['date'];
                        ?>
                        <div class="card mb-3" style="max-width: 50rem;">
                            <div class="card-header bg-warning"><?= $row['title']; ?></div>
                            <div class="card-body">
                               <?= $row['content']; ?>
                            </div>
                        </div>
                        <?php }} else {
                            echo "<h3>No Content Available</h3>";
                        } ?>
                </div>
            </div>
        </div>
    </div>
    <div class="Schedule">
        <div class="col-md-12" align="center">
            <div class="card border-warning">
                <div class="card-header bg-theme"><h4 style="color: white">Schedules</h4></div>
                <div class="card-body">
                    <?php
                    $dn = datenow();
                    $value = custom_query("SELECT * FROM tbl_post WHERE date2 >= '$dn' AND type = 'Schedule' and status = 'Active' ORDER by id DESC");
                    if($value->rowCount()>0)
                    {
                        while($row=$value->fetch(PDO::FETCH_ASSOC))
                        {
                            $id = $row['id'];
                            $d2 = $row['date2'];
                            $d = $row['date'];
                            ?>
                            <div class="card mb-3" style="max-width: 50rem;">
                                <div class="card-header bg-success"><?= $row['title']; ?></div>
                                <div class="card-body">
                                    <?= $row['content']; ?>
                                </div>
                            </div>
                        <?php }} else {
                        echo "<h3>No Content Available</h3>";
                    } ?>
                </div>
            </div>
        </div>
    </div>
    <div class="Images">
        <div class="col-md-12" align="center">
            <div class="card card-accent-theme ">
                <div class="card-body">
                    <h3 style="text-align: center">Images</h3>
                </div>
            </div>
        </div>
    </div>

视频部分
时间表
我已经修好了这个。我不再使用CSS网格，而是使用div和col返回引导网格