HTML 偶数张卡片

Question

我目前正在尝试制作一个网站，我是 HTML/CSS/Bootstrap

的初学者

我正在使用 Bootstrap v4.6.0

这是我的页面的完整代码：Codepen

所以我的问题是当一张卡片里面没有任何东西时，我似乎无法得到一个均匀大小的 2x2 网格

但是当我在里面放一些东西时，它工作得很好

我也有滚动问题div，当我向这个部分添加更多项目时，它不会检测到我的项目溢出，而是扩大容器：

这是“SURAT TERKAIT”部分的代码：

<div class="container d-flex flex-grow-1 flex-column p-0" style="background-color: transparent; align-items:center; justify-content: space-around">
                                <div class="row w-100">
                                    <div class="container" style="background-color: white; color:black; padding: 7px 10px 7px 10px; border-radius: 10px; flex-direction: row; display: flex;">
                                        <table class="w-100">
                                            <tr>
                                                <th>No.</th>
                                                <th>Tanggal Surat</th>
                                                <th>Pemohon</th>
                                                <th>Tanggal Acara</th>
                                            </tr>
                                            <tr>
                                                <td>122 xx212 2221</td>
                                                <td>01/01/2021</td>
                                                <td>asdasda asd as</td>
                                                <td>01/02/2021</td>
                                            </tr>
                                        </table>
                                        <button style=" border-radius: 5px !important; border: none; font-weight: 5vh; background-color: #333333;"><i class="fa-solid fa-file-pdf" style="color: red; font-size: 2vh"></i></button>
                                        <button style=" border-radius: 5px !important; border: none; font-weight: 5vh; background-color: white"><i class="fa-solid fa-caret-down" style="color: #333333; font-size: 2vh"></i></button>
                                    </div>
                                </div>
                                <div class="row w-100">
                                    <div class="container" style="background-color: white; color:black; padding: 7px 10px 7px 10px; border-radius: 10px; flex-direction: row; display: flex;">
                                        <table class="w-100">
                                            <tr>
                                                <th>No.</th>
                                                <th>Tanggal Surat</th>
                                                <th>Pemohon</th>
                                                <th>Tanggal Acara</th>
                                            </tr>
                                            <tr>
                                                <td>122 xx212 2221</td>
                                                <td>01/01/2021</td>
                                                <td>asdasda asd as</td>
                                                <td>01/02/2021</td>
                                            </tr>
                                        </table>
                                        <button style=" border-radius: 5px !important; border: none; font-weight: 5vh; background-color: #333333;"><i class="fa-solid fa-file-pdf" style="color: red; font-size: 2vh"></i></button>
                                        <button style=" border-radius: 5px !important; border: none; font-weight: 5vh; background-color: white"><i class="fa-solid fa-caret-down" style="color: #333333; font-size: 2vh"></i></button>
                                    </div>
                                </div>
                                <div class="row w-100">
                                    <div class="container" style="background-color: white; color:black; padding: 7px 10px 7px 10px; border-radius: 10px; flex-direction: row; display: flex;">
                                        <table class="w-100">
                                            <tr>
                                                <th>No.</th>
                                                <th>Tanggal Surat</th>
                                                <th>Pemohon</th>
                                                <th>Tanggal Acara</th>
                                            </tr>
                                            <tr>
                                                <td>122 xx212 2221</td>
                                                <td>01/01/2021</td>
                                                <td>asdasda asd as</td>
                                                <td>01/02/2021</td>
                                            </tr>
                                        </table>
                                        <button style=" border-radius: 5px !important; border: none; font-weight: 5vh; background-color: #333333;"><i class="fa-solid fa-file-pdf" style="color: red; font-size: 2vh"></i></button>
                                        <button style=" border-radius: 5px !important; border: none; font-weight: 5vh; background-color: white"><i class="fa-solid fa-caret-down" style="color: #333333; font-size: 2vh"></i></button>
                                    </div>
                                </div>
                                <div class="row w-100">
                                    <div class="container" style="background-color: white; color:black; padding: 7px 10px 7px 10px; border-radius: 10px; flex-direction: row; display: flex;">
                                        <table class="w-100">
                                            <tr>
                                                <th>No.</th>
                                                <th>Tanggal Surat</th>
                                                <th>Pemohon</th>
                                                <th>Tanggal Acara</th>
                                            </tr>
                                            <tr>
                                                <td>122 xx212 2221</td>
                                                <td>01/01/2021</td>
                                                <td>asdasda asd as</td>
                                                <td>01/02/2021</td>
                                            </tr>
                                        </table>
                                        <button style=" border-radius: 5px !important; border: none; font-weight: 5vh; background-color: #333333;"><i class="fa-solid fa-file-pdf" style="color: red; font-size: 2vh"></i></button>
                                        <button style=" border-radius: 5px !important; border: none; font-weight: 5vh; background-color: white"><i class="fa-solid fa-caret-down" style="color: #333333; font-size: 2vh"></i></button>
                                    </div>
                                </div>
                            </div>

所以我的问题是：

如何使所有 2x2 网格大小均匀？
如何使“SURAT TERKAIT”部分具有可滚动功能（假设我只想最多显示 4 个项目）

提前致谢！ :)

Answer 1

将 max-size 和 min-size 提供给您的网格以修复大小，它不会依赖于数据。

对于滚动，在所有网格上设置一个 div，给它一个高度，例如 height: 500px，然后添加 css：overflow: scroll;

HTML 偶数张卡片

HTML Even Sized Cards

html

css

bootstrap-4