CSS grid area names starting with numbers

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.

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.

1 Like

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.

1 Like

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.

1 Like