如何在CSS网格布局中放置模态？

Question

我的项目的登录页面具有一个模式，该模式在单击按钮时出现。最初使用位置进行定位：固定且边距设置为零；这样，它基本上出现在屏幕的中央。

现在，我要使用CSS网格来定位它，因为登录页面是网格布局。这是布局：

.grid {
display: grid;
width: 100vw;
height: 100vh;
grid-template-rows: repeat(20, 5%);
grid-template-columns: repeat(20, 5%);
}

在一个单独的CSS文件中，我有模态窗口的CSS。

.modalWindow {
display: grid;
grid-column: 8 / 15;
grid-row: 6 / 19;
position: fixed;
background: rgba(0,0,0,0.2);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

但是现在，它没有出现在我放置在网格中的位置（在屏幕中央），而是向左齐平，并且位于浏览器窗口顶部下方约一英寸处。

如何更改此CSS，以将模态正确地放置在网格中？

谢谢。