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

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

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

Link to the challenge:

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

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.

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

your code is…given below…`


Preformatted text



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

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

try this… this one is work!

1 Like