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片段（因为它是React应用，所以不能放在codepen上，这是无关紧要的，如果有帮助，我可以链接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>

响应式CSS网格无法正确显示

0 个答案: