Use CSS Grid unit to Change the Size of Columns and Rows

HTML-CSS
1

Tell us what’s happening:
if you give 1fr in the beginning, won’t it take the whole space of the container?

Your code so far


<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* modify the code below this line */
    
    grid-template-columns:  1fr 100px 2fr ;
    
    /* modify the code above this line */
    grid-template-rows: 50px 50px;
  }
</style>
  
<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows

2

1fr takes full available width. 100px takes exactly 100px and if there is another fr; in this case, 2fr then the available space is distributed as 1 of 3 parts of available space for 1fr and 2 of 3 parts of the available space for 2fr. For example, if the width of the grid container is 500px then the available space will be (500px-100px)=400px; 1fr will take 133px; and 2fr will take 266px.

3

HI @akr no! 1fr specifies 1 fraction of the container. You have specified that there are 3 columns. The first will take up 1 fraction of the available container width dependent upon how much space the other two columns take up. The second column is a fixed width of 100px and will never change width irrespective of how wide the container is. The third column is specified as 2 fractions of the available container width and thus, will always be twice as wide as the first column. The first and third columns will change widths relative to the container width. Try altering the size off the browser window to see this. Changing the font size to 1em will show that the min column width is actually the font size beyond which they can shrink no more!

4

as @picklu said! :slight_smile: who got there just before I had finished typing!!!

1 Like
5

I passed this challenge but I’m still confused :frowning: I created the 3 columns as specified but why does the output show 1 2 3 4 5, did I not end up actually creating 5 columns instead?

Edit: Nvm figured it out :grin: