# Hi, i'm having issues on how to set grid-template-columns property with auto and 1fr as values

**URL:** <https://forum.freecodecamp.org/t/hi-im-having-issues-on-how-to-set-grid-template-columns-property-with-auto-and-1fr-as-values/465732>\
**Category:** Curriculum Help\
**Tags:** html, css\
**Created:** [June 19, 2021, 7:37pm UTC](https://forum.freecodecamp.org/t/hi-im-having-issues-on-how-to-set-grid-template-columns-property-with-auto-and-1fr-as-values/465732 "2021-06-19T19:37:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![fabulous](https://avatars.discourse-cdn.com/v4/letter/f/67e7ee/32.png) [@fabulous](https://forum.freecodecamp.org/u/fabulous)\
**Post date:** [June 19, 2021, 7:37pm UTC](https://forum.freecodecamp.org/t/hi-im-having-issues-on-how-to-set-grid-template-columns-property-with-auto-and-1fr-as-values/465732/1 "2021-06-19T19:37:31Z")

</div>

**Tell us what’s happening:**  
Describe your issue in detail here.

```
  **Your code so far**

```

```html

<style>
.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";
}
.item1 {
  background: LightSkyBlue;
  grid-area: header;
}

.item2 {
  background: LightSalmon;
  grid-area: advert;
}

.item3 {
  background: PaleTurquoise;
  grid-area: content;
  grid-template-columns: auto, (1fr);
  display: grid;
  /* Only change code below this line */

  /* Only change code above this line */
}

.item4 {
  background: lightpink;
  grid-area: footer;
}

.itemOne {
  background: PaleGreen;
}

.itemTwo {
  background: BlanchedAlmond;
}

</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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36`

**Challenge:** Create Grids within Grids

**Link to the challenge:**

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/create-grids-within-grids)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [June 19, 2021, 9:56pm UTC](https://forum.freecodecamp.org/t/hi-im-having-issues-on-how-to-set-grid-template-columns-property-with-auto-and-1fr-as-values/465732/2 "2021-06-19T21:56:17Z")

</div>

Possibly the instructions were not clear as to the format of the code you were to enter. But if you look in the `.container` class you will see an example.  
Compare yours to code that works and you’ll see the difference.

On a side note, there are comments that tell you where to place your code. You didn’t not place your code correctly.  
Although it will not cause this test to fail there are later lessons where placing your code correctly is a must.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [December 19, 2021, 9:56am UTC](https://forum.freecodecamp.org/t/hi-im-having-issues-on-how-to-set-grid-template-columns-property-with-auto-and-1fr-as-values/465732/3 "2021-12-19T09:56:40Z")

</div>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.