Help with CSS grids

HTML-CSS
1

Tell us what’s happening:
Hi, I have passed all the tests, but now, I’m trying to build a nice layout using CSS grids. I set 2 columns and 1 row. So far the 2 columns are displayed, but all the html elements appear on top of each other. I tried setting more rows, it doesn’t help. So I believe external wisdom would be nice.

Your code so far
Here’s the CSS part:


main {
  background: blue;
  text-align: center;
}
#survey-form {
  margin: 0 auto;
  max-width: 60%;
  min-height: 1000px;
  background: beige;
  text-align: left;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 100%;
  grid-column-gap: 25px;
  grid-template-areas: 
    "col1 col2"
}
.left {
  justify-self: end;
  grid-area: col1;
}
.right {
  justify-self: start;
  grid-area: col2;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:62.0) Gecko/20100101 Firefox/62.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form

2

How about a link to your codepen?

3
4

Hey @Marion,

This is cause you have give grid-area property to all the elements with class left and you have done the same thing for class right.
Try using grids more cautiously.
Here is some reading material :

See, if you can find a fix to that on your own.
And if you are still facing issues, you can always come back with your question.

Hope this helps.

5

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

6

Hey there,
You need to have separate grid area for each element. By using classes you are placing all elements in the same area. for eample:

  display: grid;
  grid-template-columns:50% 50%;
  grid-template-rows:30px 30px 30px;
  grid-row-gap:5px;
  grid-template-areas: "name-label name"
              "email-label email "
              "number-label number";

and use like:

#name {
  grid-area:name;
}
#name-label {
  grid-area:name-label;
}

#email {
  grid-area:email;
}

#email-label {
  grid-area:email-label;
}

#number {
  grid-area:number;
}

#number-label {
  grid-area:number-label;
}

also, instead of using grid-gap, use grid-row gap, so that gap is only added between rows.

7

Problem solved, thanks.