3

In trying to learn more about CSS grid, I am trying to create some different grid layouts. The one I am trying to create is the following:

grid layout

Here is one step of this:

.wrapper {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(8, 1fr);
}

.wrapper .first_box {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 1;
    grid-row-end: 7;
}

.wrapper .second_box {
    grid-column-start: 1;
    grid-column-end: 2;

    grid-row-start: 1;
    grid-row-end: 4;

}

.wrapper .third_box {
    grid-column-start: 4;
    grid-column-end: 5;

    grid-row-start: 1;
    grid-row-end: 4;
}

.wrapper .fourth_box {
    grid-column-start: 1;
    grid-column-end: 2;
}

.wrapper .fifth_box {
    grid-column-start: 4;
    grid-column-end: 5;
}

.wrapper div {
    border: 2px solid rgb(233,171,88);
    border-radius: 5px;
    background-color: rgba(233,171,88,.5);
    padding: 1em;
    color: #d9480f;
}
<div class="wrapper">
  <div class="first_box">
  First Box
  </div>
  
   <div class="second_box">
  Second Box
  </div>
  
   <div class="third_box">
    Third Box
  </div>
  
   <div class="fourth_box">
  Fourth Box
  </div>
  
    <div class="fifth_box">
  Fifth Box
  </div>
  
</div>

At this point, the first two boxes look correct. The problem is when I try to set the rows for the bottom left box and the bottom right box. For both of these boxes, I have grid-row-start set to where the upper left and upper right boxes end and I have grid-row-end set to where the big box ends. This causes the boxes to go back to their default size:

.wrapper {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(8, 1fr);
}

.wrapper .first_box {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 1;
    grid-row-end: 7;
}

.wrapper .second_box {
    grid-column-start: 1;
    grid-column-end: 2;

    grid-row-start: 1;
    grid-row-end: 4;

}

.wrapper .third_box {
    grid-column-start: 4;
    grid-column-end: 5;

    grid-row-start: 1;
    grid-row-end: 4;
}

.wrapper .fourth_box {
    grid-column-start: 1;
    grid-column-end: 2;
    
    grid-row-start: 4;
    grid-row-end: 7;
}

.wrapper .fifth_box {
  
    grid-column-start: 4;
    grid-column-end: 5;
    
    grid-row-start: 4;
    grid-row-end: 7;
 
}

.wrapper div {
    border: 2px solid rgb(233,171,88);
    border-radius: 5px;
    background-color: rgba(233,171,88,.5);
    padding: 1em;
    color: #d9480f;
}
<div class="wrapper">
  <div class="first_box">
  First Box
  </div>
  
   <div class="second_box">
  Second Box
  </div>
  
   <div class="third_box">
    Third Box
  </div>
  
   <div class="fourth_box">
  Fourth Box
  </div>
  
    <div class="fifth_box">
  Fifth Box
  </div>

</div>

I'm not sure why this happens. I would appreciate if someone could help my understand why this happens.

kukkuz
  • 41,512
  • 6
  • 59
  • 95
Logan Phillips
  • 660
  • 2
  • 10
  • 23

2 Answers2

2

Note your usage of grid-row-start and grid-column-end - they refer to grid lines. You have 8 columns here - so grid lines are numbered from 0 to 9. See corrected demo below:

.wrapper {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(8, 1fr);
}

.wrapper .first_box {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 1;
    grid-row-end: 9; /* CHANGED */
}

.wrapper .second_box {
    grid-column-start: 1;
    grid-column-end: 2;

    grid-row-start: 1;
    grid-row-end: 5; /* CHANGED */

}

.wrapper .third_box {
    grid-column-start: 4;
    grid-column-end: 5;

    grid-row-start: 1;
    grid-row-end: 5; /* CHANGED */
}

.wrapper .fourth_box {
    grid-column-start: 1;
    grid-column-end: 2;
    
    grid-row-start: 5; /* CHANGED */
    grid-row-end: 9; /* CHANGED */
}

.wrapper .fifth_box {
  
    grid-column-start: 4;
    grid-column-end: 5;
    
    grid-row-start: 5; /* CHANGED */
    grid-row-end: 9; /* CHANGED */
 
}

.wrapper div {
    border: 2px solid rgb(233,171,88);
    border-radius: 5px;
    background-color: rgba(233,171,88,.5);
    padding: 1em;
    color: #d9480f;
}
<div class="wrapper">
  <div class="first_box">
  First Box
  </div>
  
   <div class="second_box">
  Second Box
  </div>
  
   <div class="third_box">
    Third Box
  </div>
  
   <div class="fourth_box">
  Fourth Box
  </div>
  
    <div class="fifth_box">
  Fifth Box
  </div>

</div>

Coming to the differences when you span the first-column to different rows, as you have only specified 1fr for each row and you don't have a height set for the grid container, it will take a height that the grid layout algorithm sees fit.

But if you see closely you can see a pattern - the smallest box is occupying only as much space as its content. So we can talk ratios here.

The distribution of leftover space occurs after all non-flexible track sizing functions have reached their maximum. The total size of such rows or columns is subtracted from the available space, yielding the leftover space, which is then divided among the flex-sized rows and columns in proportion to their flex factor.

MDN - emphasis above is mine.

In the first case, the first and third column has a 3:1 ratio of heights while the second column extends 6 rows. (the 1 in the 3:1 ratio is the box taking height as much as its content)

Similarly in the second case, however the first and third column has 3:3 ratio of heights while the second column extends 6 rows. The ratio can simplify to 1:1 for the first and third and 2 for the second column.

kukkuz
  • 41,512
  • 6
  • 59
  • 95
0

so your question is why the boxes shrink when you give the row properties to bottom boxes.

to understand this, assume that grid will take the minimum height it can be constructed in this is the key idea for default sizing of grid.

now in first case bottom boxes will by default take 1 row and minimum size required for that row will be the size of text and hence bottom boxes get size of height of text( little greater than that, but you get the idea) , so one row in the first case is defined by height of text and hence the above boxes are bigger as they are spanning 3 rows.

NOW IN SECOND CASE

when you assign 3 rows to bottom boxes also, now minimum height required for 3 rows is the height of text and bottom 3 rows take height equal to text and hence top boxes also spanning 3 rows have the reduced height which is governed by height of text now

read about sizing behavior here https://www.w3.org/TR/css-grid-1/#intrinsic-sizes

ashish singh
  • 6,526
  • 2
  • 15
  • 35