Using CSS Grid units to Change the Size of Columns and Rows

Using CSS Grid units to Change the Size of Columns and Rows
0

In this exercise, there is 1fr and 2fr, so how does the 100px account for the fr?


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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.90 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

Not sure I understand your question. Are you asking for help with the challenge or asking how the grid calculation works?

Hi Sharon,

it is just about to write your code in right order. it should be like this :

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

It is best not to just give the answer to the challenges. Always try helping first without straight up giving the answer.

you are right :slight_smile: sorr yfor that.