How to use CSS Grid units to Change the Size of Columns and Rows

HTML-CSS
1

Hi everyone!
I am just having trouble with this one topic. I keep changing it to
grid-temple-columns: auto 100px 10% 2fr 1fr;
I just am not sure what is wrong and why its not working. I also am just confused how to make it into three columns.

Any help would be great!
Thank you in advance!

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: auto 50px 10% 2fr 1fr;
    
    /* 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>

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

Your code create a grid with five columns ( first column width: auto, second column width: 50px and so on…)

This is what the challenge asks:

Make a grid with three columns whose widths are as follows: 1fr, 100px, and 2fr

3

I am still confused how to make it 3 columns. I understand that is the task. I just don’t understand exactly how to get it into 3 columns.

4

The number of columns depends on the number of values you write, each value is the corresponding column width.
grid-template-columns: 2px --> One column, 2px wide
grid-template-columns: 50px auto --> Two columns , 50px wide the former, autosize the latter
grid-template-columns: 50px 3vw 1fr --> Three columns: 50 px wide the first, 3% of viewport width the second, 1 part of the available space ( it fill the missing space in this case) the third
…
I hope it is more clear, feel free to reply if it isn’t^^

5

your code is…given below…`

`

Preformatted text

`

`

grid-template-columns:1fr 100px 2fr;

6

Correct code is…
grid-template-columns: 1fr 100px 2fr ;

try this… this one is work!

1 Like