Namimg css grids

Is it possible to name grids and select by name ?

Edit note to self watch tutorial RTM

Hi @Idott,
It is possible. The one caveat is that the visual editor (at least for now) doesn’t show them well if you set your grid up using repeat. You can still name the areas and place items using the names, they just don’t all show up in the visual editor. Here is an example where the areas are set-up without repeats.

To get this to appear you click on the blue grid in the upper-left corne of any grid element and then click “Edit parent grid…” or hit the hot key for your system. I’m on a Mac, so CMD-G

Items can be placed by dragging the handles or from that same menu. You may notice it lists all of the named areas.

I could be wrong, but I think he means, or at least thought he meant… name the ENTIRE grid. Multiple grids being used, So funky gridinner grid etc more so than named aread… BUT… I could be wrong.

lets see what the OP suggests :slight_smile:

Ahh - didn’t think to read it that way.
Right now you can only sort of, kind of, do this.
Best you can do is use unique names for each area. So maybe grid-1–main, grid-2-sidebar, etc… But, grids within grids are totally doable. Can be confusing if you try to use fr, but totally doable.
What you are wishing for is called subgrids. It is part of the CSS Grid Layout Module 2 draft spec. It will be a little while before it has wide browser acceptance after it is moved out of draft.