网格区域未居中显示弹性项目内容

Question

我有一个网格区域模板。在我的区域之一中，项目未居中。我使用了align-items中心，justify-content中心和justify-items中心。无济于事。我确实设法使应该具有固定高度和宽度的框标题居中，但是当我添加对齐项目居中时，它减小了标题框的高度，该标题框的颜色与背景颜色不同，并且引人注目。 >

@media (min-width: 1081px) {
  #content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(50px, auto);
    grid-gap: 0.5rem;
    max-width: 100%;
    margin: 0 auto;
    grid-template-areas:
      "nav nav nav nav"
      "header header main main"
      "header header main main"
      "header header main main"
      "header header main main"
      "product1 product2 product3 product4"
      "product1 product2 product3 product4"
      "product1 product2 product3 product4"
      "product1 product2 product3 product4"
      "services services services services"
      "services services services services"
      "services services services services"
      "footer footer footer footer";
  }
}

如何解决此问题。这是codepen。