Различный результат сетки css в Chrome и MS Edge

Я новичок в веб-разработке, поэтому я не совсем уверен, что здесь не так. Я использую загрузочную сетку. Вот css:

body {
    background: #252525;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    height: 100%;
    width: 100%;
    overflow: auto;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.grid-container {
    display: grid;
    overflow: auto;
    height: inherit;
    width: inherit;
}

.grid-container > * {
    position: absolute
}


.login-box {
    align-self: center;
    justify-self: center;
    width: 80%;
    max-width: 450px;
    min-width: 250px;
    padding: 0;
}

HTML:

<div class="grid-container">
            <div class="login-box container-fluid">
                <div class="row">
                    <form id="frmLogin">
                        <div class="col-md-12 clear-margin-padding text-center">
                            <h4>Login to service</h4>
                        </div>

                        <div class="col-md-12 clear-margin-padding" style="margin-top: 10px;">
                            <table>
                                <col width="90">
                                <col width="*">

                                <tr>
                                    <td>Email</td>
                                    <td><input type="email" id="txtEmail" required></td>
                                </tr>

                                <tr>
                                    <td>Password</td>
                                    <td><input type="password" id="txtPassword" required></td>
                                </tr>
                            </table>
                        </div>

                        <div class="col-md-12 clear-margin-padding text-center" style="margin-top: 10px">
                            <div class="wrap-panel">
                                <button type="button" id="btnRegister">Register</button>
                                <button type="submit" id="btnLogin">Login</button>
                            </div>
                        </div>
                    </form>

                    <div class="col-md-12 clear-margin-padding text-center" style="margin-top: 5px">
                        <a href="/recovery">Forgot my password</a>
                    </div>
                </div>
            </div>
        </div>

Я не уверен, кто здесь не прав, но наверняка это вызвано

position: absolute;

Чего я хочу добиться, так это сделать окно входа в систему центрированным, и когда я хочу добавить больше «поля» в контейнер сетки, я могу расположить их на основе выравнивания и выравнивания себя, чтобы контейнер сетки мог действовать как сетка WPF. контроль.

Любая помощь приветствуется.

Другой пример (тот же контейнер .grid):

HTML:

<div class="grid-container">
            <div style="width:100px;height:100px;align-self:start;justify-self: left;background: black"></div>
            <div style="width:100px;height:100px;align-self:center;justify-self: center;background: black"></div>
            <div style="width:100px;height:100px;align-self:end;justify-self: right;background: black"></div>
        </div>

MS Edge

Chrome