Responsive css grid not displaying correctly - css

Question

I have to build a CSS grid system. Here is some of my initial code:
#carousel-data{
display: grid;
grid-template-columns: 3% 40% 54% 3%;
grid-template-rows: 10% 10% 60% 20%;
align-content: center;
height: 72vh;
margin-top: 8.5vh;
}
.carousel-text-title{
grid-column-start:3;
grid-row:2/3;
justify-self:start;
font-size:2.5em;
margin-left:30px;
font-weight:bold;
color:white;
}
.carousel-text-content{
grid-column-start: 3;
grid-row: 3/4;
justify-self: start;
margin-top:50px;
margin-left:30px;
font-size:2rem;
color: white;
}
The first part is the container and the other two are some element that are placed in the said container.
This works just fine. But then I found out I had to make the container responsive, that is to modify it's height based on the content displayed. So i went ahead and changed the height property to min-height thinking this would do the trick. But when I ran the code, everything was messed up. Some rows were missing and elements that had their size specified with % or had set only a max height/width weren't showing.
I can't figure out what am I doing wrong. Can you help me out please? Thanks in advance!
Edit:
Here is the HTML fragment(can't put it up on codepen because it's a React App,it would be irrelevant, I can link the github repository if that would be helpful) :
<div className="carrousel">
<div className="grid-container">
<PageIndicator size={this.props.data.length} activeIndice={this.state.currentIndice}
style={{gridColumnStart:'second',justifySelf:'center',marginTop:'30px'}}
/>
</div>
<div id="carousel-data" style={this.state.slideBackgroundStyle} className={this.state.style}>
<Arrow style={{ gridColumnStart: '1', gridRow: '3', justifySelf: 'center', alignSelf: 'center' }}
orientation='left' onClick={this.changeSlide} />
<div className="carousel-image" style={{gridColumnStart:'2/3',gridRow:'2/4' ,justifySelf:'center'}}>
<img src={this.props.data[this.state.currentIndice].picture}
style={this.props.data[this.state.currentIndice].style ?
{ ...this.props.data[this.state.currentIndice].style, display: "inline-block", maxWidth: '95%', maxHeight: '100%' } : { display: "inline-block", maxWidth: '95%', maxHeight: '100%' }} />
</div>
<div className="carousel-text-title">
{this.props.data[this.state.currentIndice].title}
</div>
<div className="carousel-text-content" >
{this.props.data[this.state.currentIndice].text}
</div>
<Arrow style={{ gridColumnStart: '4', gridRow: '3', justifySelf: 'center', alignSelf: 'center' }}
orientation='right' onClick={this.changeSlide} />
</div>
</div>