0

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

The third grid-item has a height of 500px, but the track itself seems to be larger than 500px, and the other siblings keep expanding with the track, and so the 3 grid-items have different height. Even if you make the 3rd item height of 350px, or even 200px, its height does not align with the height of the siblings. Why? The inspector tool shows that the grid tracks are on the same height, but why is the 3rd item with different height? The height of the item is not the same as the track. I don't get it.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • because the (1) track and (2) the item are different entities. You define the size of (1) using templates like you did and the size of (2) using height [if nothing is specified it will be based on other properties]. There is no rule that say (1) should always be equal to (2) – Temani Afif Jan 18 '21 at 12:16
  • I am sorry i got a little confused about the grid-items you are referring to. Could you use the actual names to label them? (1) and (2) refer to the grid-items with content called "first" and "second"? or are you referring to the 3 elements on row 3 called "third" "fourth" and "five"? –  Jan 18 '21 at 12:26
  • I am talking in gerenal. A grid is composed with (1) tracks and inside them you have (2) grid items. Both are different entities – Temani Afif Jan 18 '21 at 12:33
  • I think there is a misunderstanding here. I am talking about the grid items "three" "four" and "five", and the height on "three" is set to 500px, but the track or cell itself is not 500px, and the siblings "four" and "five" are larger. And even when you keep changing the height to lower or larger, they are never aligned. To see the effect, you have to use full screen on the snippet. –  Jan 18 '21 at 12:36
  • Yes, but then why is it that, when i increase the height of the "three", the other siblings increase with it, but are not aligned? –  Jan 18 '21 at 12:37
  • you need to understand the algorithm of `fr` that take into consideration the content so the 500px will influence the `fr` that define the size of the track – Temani Afif Jan 18 '21 at 12:39
  • check this; https://stackoverflow.com/a/52861514/8620333 – Temani Afif Jan 18 '21 at 12:40
  • I understand that the height influences the fr somehow, but i am not understanding how exactly.. When i make the "three" 200px, the other two "four" and "five" increase in height.. why? what makes them increase in height? and then, as i keep increasing the height of the "three", it remains smaller than the cell, but the other two siblings keep enlarging with it, but the track itself is not filled with the item. I don't understand.. I tried it using cols, and it works as expected, when the height is smaller than 1fr, it doesn't push the other two siblings until it becomes larger. –  Jan 18 '21 at 12:53
  • https://jsfiddle.net/xuvycbq9/ here's a simpler version. I only left 3 elements. Four, five and six. Why, make the grid-item "four" height 200px, and you will see the "five" increase. Why? This is what i don't understand. –  Jan 18 '21 at 13:11

0 Answers0