Create Grids within Grids,

HTML-CSS
1

**Tell us what’s happening:**can someone explain the line “”'grid-templates-columns: auto 1fr;"""
thnks in advance

Your code so far


<style>
  .item1 {
    background: LightSkyBlue;
    grid-area: header;
  }
  
  .item2 {
    background: LightSalmon;
    grid-area: advert;
  }
  
  .item3 {
    background: red;
    grid-area: content;
    /* enter your code below this line */
    display:grid;
    grid-templates-columns: auto 1fr;
    
    /* enter your code above this line */
  }
  
  .item4 {
    background: lightpink;
    grid-area: footer;
  }
  
  .itemOne {
    background: PaleGreen;
  }
  
  .itemTwo {
    background: BlanchedAlmond;
  }
  
  .container {
    font-size: 1.5em;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    grid-gap: 10px;
    grid-template-areas:
      "advert header"
      "advert content"
      "advert footer";
  }
</style>
  
<div class="container">
  <div class="item1">header</div>
  <div class="item2">advert</div>
  <div class="item3">
    <div class="itemOne">paragraph1</div>
    <div class="itemTwo">paragraph2</div>
  </div>
  <div class="item4">footer</div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/css-grid/create-grids-within-grids

2

This is basically a css line that says that I want to create 2 columns - 1 that automatically sizes and 1 that is some preset fraction.

3

auto will take only as much space as needed.
1fr will take 1 fraction of remaining space. Since it is the only fraction that would be 100% of remaining space.

image
image695×352 9.85 KB

You should be able to see the change if you pull the vertical divider to the left some. divs are no longer stacked one atop the other. p1 is only as wide as needed to display content and p2 takes all remaining space

Also, is grid-template not grid-templates

1 Like
4

be careful its template not templates

5

It is grid-template-columns: not templates
also be careful with spacing sometimes freecodecamp wont run it right if there is no space for ex: display:grid; instead put an extra space display: grid

1 Like