css grid rows growing larger than intended - html

Question

I'm interested in making responsive design with CSS grids, it looks promising. I've determined my dimensions as follows (to see if I can get the grid to do what I want):
.product-page-container {
display:grid;
grid-template-columns:2fr 2fr;
grid-template-rows:150px minmax(674px,675px) minmax(724px,725px) minmax(599px,600px) minmax(399px,400px) 150px;
grid-template-areas:
"banner banner"
"productHero productDetails"
"video video"
"features features"
"meta meta"
"footerBanner footerBanner"
}
In putting 'minmax' I assumed this would force my content to stay within this size. Which, in development, the rest of my website does not seem to be the case at all. The rows grow and shrink much past those limits or less. I
I'm fairly lost on how to achieve this. For example, my features area has a script that swaps out content. One block of contents ends up being 500px in height, and the next block of content ends up being 1200px in height, and the grid expands so it still is in the 'features' area, it's just the features area has expanded.
Is this just how grids work?

Answer 1

I'm having trouble observing what you're observing. Super ugly preview, I know, but scroll down to the green div. That's your features section. White div on the left is 500px height, and white div on the right is 1200px height (but you wouldn't know it since it's limited by the size of the .features div.
.product-page-container {
display:grid;
grid-template-columns:2fr 2fr;
grid-template-rows:150px 675px 725px 600px 400px 150px;
grid-template-areas:
"banner banner"
"productHero productDetails"
"video video"
"features features"
"meta meta"
"footerBanner footerBanner"
}
.banner {
grid-area: banner;
background-color: black;
}
.product-hero {
grid-area: productHero;
background-color: red;
}
.product-details {
grid-area: productDetails;
background-color: purple;
}
.video {
grid-area: video;
background-color: blue;
}
.features {
grid-area: features;
background-color: green;
}
.meta {
grid-area: meta;
background-color: yellow;
}
.footer-banner {
grid-area: footerBanner;
background-color: brown;
}
.small-content,
.large-content {
display: inline-block;
vertical-align: top;
margin: 20px;
width: 50px;
background-color: white;
}
.small-content {
height: 500px;
}
.large-content {
height: 1200px;
}
<div class="product-page-container">
<div class="banner"></div>
<div class="product-hero"></div>
<div class="product-details"></div>
<div class="video"></div>
<div class="features">
<div class="small-content"></div>
<div class="large-content"></div>
</div>
<div class="meta"></div>
<div class="footer-banner"></div>
</div>
Without more details it would be hard to replicate and debug, but alas:
THERE ARE SOME REASONS why your grid would behave in unexpected ways (including <pre> tags and large images). Chris Coyier wrote a great article on these problems and how to solve them here: https://css-tricks.com/preventing-a-grid-blowout/
I have a feeling that that article ^^ could contain your solution. Otherwise, try giving us more code to work from here. Good luck!