我不知道如何正确布局网格

Question

我正在尝试将网格布局为2x2网格。我进行了设置，以便当我进入Firefox的开发工具时，它告诉我我的网格确实是2x2，但是在实际的网页上，这只是一个大列

我尝试将显示类型设置为几个不同的选项，但是它们都不能解决实际问题，它们只是改变网格的外观，而不改变网格的布局。

.grid-container{
   display: inline-grid;
   background-color: #2196F3;
   padding: 10px;
   position: absolute;
   top: 201px;
   width: 75.34em;
   left: 11.2em;
   overflow: visible;
   grid-template-columns: 50% 50% !important;
   grid-row: 50% 50% !important;
   height:100%;
}

.grid-item{
   background-color: rgba(255, 255, 255, 0.8);
   border: 2px solid rgba(0, 0, 0, 0.8);
   padding: 10px;
   font-size: 1em;
   text-align: justify;
   width: 100%;

}

我希望网格为2x2，这样一眼便可以轻松访问每篇文章，而不必向下滚动页面以查找要阅读的内容。