How to get parent container to shrink to children , how would I get rid of white space shorten page?

How to get parent container to shrink to children , how would I get rid of white space shorten page?
0

https://codepen.io/Fraction11/pen/zYGmeaV

body {
  padding-bottom:100px;
  margin:auto;
}


.parent {
  display:grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(10, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.div1 { 
  grid-area: 1 / 1 / 4 / 10;
  background-color:#2b580c;
  height:250px;
  font-family: Liu Jian Mao Cao;
  font-size:35px;
  text-align:center;
  padding-bottom:75px;
}

.div2 { 
  grid-area: 4 / 1 / 11 / 4;
  background-color:#639a67;
  font-family: Liu Jian Mao Cao;
  text-align:center;
  margin-bottom:280px;
}
.div3 {
  grid-area: 4 / 4 / 11 / 7;
  background-color:#d8ebb5;
  margin-bottom:280px;
}
.div4 { 
  grid-area: 4 / 7 / 11 / 10;
  background-color:#d9bf77;
  margin-bottom:280px;
  font-family: Liu Jian Mao Cao;
  text-align:center;
}

Hello there.

Some things to note when using CodePen:

  1. CodePen does not expect any content outwith the body tags.
  2. All meta, link, and script information must be put in the :gear: settings section of the HTML editor.
  3. You do not need to/cannot link the CSS in your HTML, if you place the CSS in the appropriate section.
  4. If your project uses React, use the Babel preprocessor, and link the CDN in the appropriate :gear: section.
  5. The editors offer the ability to format and analyse your code, providing useful information about forgotten closing tags etc.

If you are still confused with how to use CodePen, please read the official documentation.

Hope this helps

Just try this for your CSS :

.parent {
   display:grid;
   grid-template-columns: repeat(9, fit-content(1fr));   /*  <-- */
   grid-template-rows: repeat(10, 1fr);
   grid-column-gap: 0px;
   grid-row-gap: 0px;
}