Help: grid-area and SASS

how can i “conect” the inputs with the grid:area propety in scss?
whith nth-of.type doesn´t work,
And i have to conect the first input OR the form to the grid-area?
if you can give me a little example with Sass syntaxis it would be awesome!.
Thanks in advance!.
im trying to do a calculator.


h2

You need to specify a grid-area for each thing on the grid. Ex:

.button {
  grid-area: btn;
}

main {
  grid-template-areas:
    "btn btn btn btn"
    "btn btn btn btn"
...etc

thats what i do. Look at the second image.
look tha inputs in the first image, how can i connect this inputs to the grid area?

i try with this but doesn´t work with child or- child-of type
h3

It’s never going to work because you’re using symbols that can’t be used as CSS identifiers. You would need to give each grid-area a valid name.

You also don’t need to use grid-template-areas, you have 20 buttons all of exactly the same size in a 4*5 grid.

See example1 for a broken version using the unicode symbols as identifiers, example2 for a version that doesn’t attempt to use areas

Thanks for take time and whrite code and respond!. I was very confused, and it was easy thing.

1 Like