0

i have this HTML

<div class="container--1">
        <div class="el el--1">(1) HTML</div>
        <div class="el el--2">(2) and</div>
        <div class="el el--3">(3) CSS</div>
        <div class="el el--4">(4) are</div>
        <div class="el el--5">(5) amazing</div>
        <div class="el el--6">(6) languages</div>
        <div class="el el--7">(7) to</div>
        <div class="el el--8">(8) learn</div>
</div>

AND CSS

.el--1 {
    background-color: blueviolet;
}
.el--2 {
    background-color: orangered;
}
.el--3 {
    background-color: green;
}
.el--4 {
    background-color: goldenrod;
    height: 150px;
}
.el--5 {
    background-color: palevioletred;
}
.el--6 {
    background-color: steelblue;
}
.el--7 {
    background-color: yellow;
}
.el--8 {
    background-color: crimson;
}

.container--1 {
    font-family: sans-serif;
    background-color: #ddd;
    font-size: 40px;
    margin: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
}

SO HAVE TWO ROWS with 4 columns. My fourth grid-items has explicit height of 150px. So the grid-items that are on the first grid rows are having also height of 150px because they are sharing the height of the 'heights grid-item`. But why the grid-items inside my second row are having height of 150px. Element number 5,6,7,8 has auto heights of 0px, Why they share the height from the first row ?

user17190872
  • 47
  • 4
  • 3
    because if the row template `1fr 1fr`, use `auto auto` instead or simply remove it and rows will be created automatically – Temani Afif Nov 01 '21 at 13:49
  • @TemaniAfif please correct me if i am wrong. As i understood 1fr i something like flex-grow in flexbox, so it fills the remaining space in the container - in my case there is not remaining space inside my container heights - so i am asking WHY IS THIS HAPPENING ? – user17190872 Nov 01 '21 at 13:51
  • it's not something like flex-grow. Where did you read about this? – Temani Afif Nov 01 '21 at 13:52
  • @user17190872 no, it means that all grid items need to be the same size, it's not like flex grow – Michał Sadowski Nov 01 '21 at 13:52
  • @TemaniAfif Well if i haave container width of 1000px. And i have grid-template-columns: 200px 200px 100px 100px then all four columns will have this static widts inside the parent's width of 1000px, But if i write grid-template-columns: 200px 200px 1fr 100px; then the first, second and the fourth COLUMN will have their static widths, but the THIRD column will take the remaining space of the parent's width. How is this different from flex-grow ? – user17190872 Nov 01 '21 at 13:55
  • In your comment you are talking about a complete different case than the one in your question. There is 0 relation with the code inside your question so you cannot use it to explain what is happening in your question. – Temani Afif Nov 01 '21 at 13:59

0 Answers0