Блог

Главная - Вопросы по программированию - Почему элементы сетки в одной строке не выравниваются по высоте одного из их братьев и сестер из той же строки?

Почему элементы сетки в одной строке не выравниваются по высоте одного из их братьев и сестер из той же строки?

#css #css-grid

#css #css-grid

Вопрос:

 .container {
    display:grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: 50px 50px;
    grid-auto-flow: row;
 
    grid-gap: 2px 2px;
    height:100vh; 

    padding:2px;

}


.grid-box {
    background-color: skyblue;  
    padding: 10px 5px;
}

.three {
    height: 500px;
    
}


.one {
    grid-column:1/-1;
}

.two {
    grid-column: 1/-1;
}

.six {
    grid-column: 1/-1;
} 
  <div class="container">
        <div class="grid-box one">First</div>
        <div class="grid-box two">Second</div>
        <div class="grid-box three">Third</div> 
        <div class="grid-box four">Four</div> 
        <div class="grid-box five">Five</div>   
        <div class="grid-box six">Six</div>      
</div>

Третий элемент сетки имеет высоту 500 пикселей, но сама дорожка кажется больше 500 пикселей, а
другие братья и сестры продолжают расширяться вместе с дорожкой, и поэтому 3 элемента сетки имеют разную высоту. Даже если вы сделаете высоту 3-го элемента 350 пикселей или даже 200 пикселей, его высота не будет совпадать с высотой братьев и сестер. Почему? Инструмент инспектора показывает, что дорожки сетки находятся на одной высоте, но почему 3-й элемент имеет разную высоту? Высота элемента не совпадает с высотой дорожки. Я не понимаю.

Комментарии:

1. потому что (1) трек и (2) элемент — это разные объекты. Вы определяете размер (1), используя шаблоны, как вы это делали, и размер (2), используя высоту [если ничего не указано, оно будет основано на других свойствах]. Не существует правила, согласно которому, скажем, (1) всегда должно быть равно (2).

2. Мне жаль, что я немного запутался в элементах сетки, на которые вы ссылаетесь. Не могли бы вы использовать настоящие имена, чтобы обозначить их? (1) и (2) относятся к элементам сетки с содержимым, называемым «первый» и «второй»? или вы имеете в виду 3 элемента в строке 3, которые называются «третий», «четвертый» и «пять»?

3. Я говорю на геренальском. Сетка состоит из (1) дорожек, а внутри них у вас есть (2) элементы сетки. Оба являются разными сущностями

4. Я думаю, что здесь есть недоразумение. Я говорю об элементах сетки «три», «четыре» и «пять», а высота на «три» установлена на 500 пикселей, но сама дорожка или ячейка не равна 500 пикселей, а братья и сестры «четыре» и «пять» больше. И даже когда вы продолжаете изменять высоту на меньшую или большую, они никогда не выравниваются. Чтобы увидеть эффект, вы должны использовать полноэкранный режим для фрагмента.

5. Да, но тогда почему, когда я увеличиваю высоту «трех», другие братья и сестры увеличиваются вместе с ним, но не выравниваются?

Метки: