Адаптивная сетка CSS не отображается правильно - PullRequest
Новая
       41

Адаптивная сетка CSS не отображается правильно

0 голосов
/ 07 октября 2018

Я должен построить систему сетки 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 App, это не имеет значения, я могу связать репозиторий 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>
...