Not able to center grid container element with "min-height" strategy per FCC article

[vikramvi]

Dear All,

Per this FCC article, I had set min-height on body element but it caused issues as below

1. I’m not able to center grid container element ( source code )

2. If I change min-height to max-height then it does work properly.

Please clarify if this article theory is right ? If yes, how should I handle my situation ?

[lasjorg]

If you want to center grid-container you would do it using the body selector (as that is the parent container). You also have to remove min-height: 100vh from .grid-container.

Summary

body {
  /* 16px */
  font-size: 1.6em;
  font-family: var(--ff-primary);
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header-block"
    "article-subscription"
    "article-about";
  /* is this good idea ? */
  grid-template-rows: 250px 220px 250px;
  /* grid-auto-rows: minmax(100px, auto); */
  /* grid-template-rows: auto auto auto; */
  /*   min-height: 100vh; */
  margin: 6rem 3rem;
  /* debug purpose only */
  /* border: 2px solid rgb(25, 208, 102); */
}