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

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;
}

did not work out…

To get a parent’s container height to match whatever is inside it, you can give a height to each of your divs of ‘max-content’. Which, you might of guessed, will set the height of that div to the max height of it’s content, which will be its children.

Now another reason to why you have all that white space as well, is coming from your margin bottom of 280px from each of your divs, it’s pushing the page down 280px away from itself, hence the white space. And plus you also have a padding bottom of 100px on your body element, which does the exact same thing, pushes the content within the body 100px, but instead, it’s doing it from the inside of the div, versus outside of the div.

I feel like you have overcomplicated a simple layout by using grid the way you are. I obviously do not know what the plan is for the rest of the page and if you really need such a complicated grid but I doubt it.

You do not need any explicit rows and you really only need 3 columns. The only grid item that needs to be placed is the first one to make it take up the full width.
https://jsfiddle.net/d6tr43jv/1/