Grid-template-areas aren't working

Grid-template-areas aren't working
0

#1

Hey so I’m currently trying to pass the code a survey form project from the web development curriculum and somehow the grid-template-areas in my “grid inside the grid” aren’t working.

So my idea was to put the *Name: in the left collumn and the in the right collumn, then a new row and do the same with the e-mail adress.

So my first question is: Why is it not working?
and my second question is: I named the classes of the wrappers class=3.1.1 (for the left one) and 3.1.2 (for the right one) am I allowed to do this or does the CSS not understand what I want if I then want to use .wrapper1.1.1?

I think it’s the easyest if I just post the codepen.

Thank you :slight_smile:


#2

Hey. I have seen that you have defined you div with the
<div class=wrapper3>
just outside the form element.

Since you have done this and the form is now the grid child of the wrapper and hence will take the first column of grid.

Since you want the name label and it’s input to be the children. I will advice you to instead wrap the contents/children of the form in the div wrapper.

Another thing I doubt using periods i.e
’ . ' in your class name is good and allowed. I advice renaming the names to some thing else e.g
instead of class=wrapper3.1.1 let it be class=name-label.

Here is an example in codepen


#3

You can call classes that, but

a. it’s very very difficult to read in the HTML,
b. it’s unbelievably difficult to read in the CSS because
c. you need to escape the class name in the CSS

Example:

<p class="3.1.1">example<p>

And in the CSS (this isn’t an error, this is what it needs to look like):

.\33 \.1\.1\A {
  // style properties for the class .3.1.1
}