css - 响应式 css 网格未正确显示

Question

我必须建立一个 CSS 网格系统。这是我的一些初始代码：

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

第一部分是容器，另外两个是放置在所述容器中的一些元素。

这工作得很好。但后来我发现我必须让容器响应，即根据显示的内容修改它的高度。所以我继续并改变了height属性，min-height认为这可以解决问题。但是当我运行代码时，一切都搞砸了。缺少某些行，并且未显示使用 % 指定其大小或仅设置最大高度/宽度的元素。

我不知道我在做什么错。你能帮帮我吗？提前致谢！

编辑：这是 HTML 片段（不能把它放在 codepen 上，因为它是一个 React 应用程序，这无关紧要，如果有帮助，我可以链接 github 存储库）：

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

标签： cssreactjsresponsivecss-grid