HTML Even Sized Cards

Issue

I'm currently trying to make a website and I'm a beginner in HTML/CSS/Bootstrap

I'm using Bootstrap v4.6.0

Here's my full code for the page: Codepen

So my problem is I can't seem to get an even sized 2x2 grid when a card doesnt have anything inside it

But when I have some things inside it, it's working just fine

I also have problems with scrollable div, while I'm adding more item to this section, it won't detected my items as overflow, but instead its enlarging the container:

Here's the code for "SURAT TERKAIT" section:

<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>

So my question is:

1. How can I make all of the 2x2 grid evenly sized?
2. How can I make the "SURAT TERKAIT" section have a scrollable (lets say I just want 4 items maximum displayed)

Thanks in advance! :)

Solution

Give max-size and min-size to your Grid to have the size fix and it will not be dependent on the data.

For scroll, have a div over all the grids giving a height to it like height: 500px, and add css: overflow: scroll;

Answered By - Ritik Banger