# CSS grid area names starting with numbers

**URL:** <https://forum.pinegrow.com/t/css-grid-area-names-starting-with-numbers/4340>\
**Category:** Bug Reports\
**Created:** [July 12, 2020, 4:53pm UTC](https://forum.pinegrow.com/t/css-grid-area-names-starting-with-numbers/4340 "2020-07-12T16:53:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [July 12, 2020, 4:53pm UTC](https://forum.pinegrow.com/t/css-grid-area-names-starting-with-numbers/4340/1 "2020-07-12T16:53:36Z")

</div>

When the named grid area starts with a number, for eg, 1-logo, the grid visual helpers don’t work anymore. Not sure if named areas can’t start with a number, if so, appropriate error message must be displayed.

Moreover, the grid doesn’t obey named area and just automatically position all the content within the grid container.

---

<div class="post-metadata">

**Author:** ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)\
**Post date:** [July 12, 2020, 5:33pm UTC](https://forum.pinegrow.com/t/css-grid-area-names-starting-with-numbers/4340/2 "2020-07-12T17:33:05Z")

</div>

the spec says names must be a sting…

you would have to experiment, but to me that means it’s like a class name and must start with an alpha character.

> **[Understanding CSS Grid: Grid Template Areas — Smashing Magazine](https://www.smashingmagazine.com/understanding-css-grid-template-areas/)**
>
> In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a look at how to use grid-template-areas to place items.

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [July 12, 2020, 5:48pm UTC](https://forum.pinegrow.com/t/css-grid-area-names-starting-with-numbers/4340/3 "2020-07-12T17:48:40Z")

</div>

Thanks for the link @droidgoo.

PG does throw an error message if I try using special characters… likewise, it should also throw the same error message when the name starts-with a number… I spent hours and finally figured out that PG allowed the invalid grid area name, hence the visual grid layout was broken.

---

<div class="post-metadata">

**Author:** ![droidgoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/droidgoo/32/2209_2.png) [@droidgoo](https://forum.pinegrow.com/u/droidgoo)\
**Post date:** [July 12, 2020, 7:19pm UTC](https://forum.pinegrow.com/t/css-grid-area-names-starting-with-numbers/4340/4 "2020-07-12T19:19:43Z")

</div>

PG will let you use the same #id for more than one element on a page (like multiple instances of a component, which uses an #id selector)

that one cross me up for a full day trying to understand why i couldn’t just put another instance of my component on the same page.