Help with CSS grids

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;
    "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:

How about a link to your codepen?

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.

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.


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-template-areas: "name-label name"
              "email-label email "
              "number-label number";

and use like:

#name {
#name-label {

#email {

#email-label {

#number {

#number-label {

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

Problem solved, thanks.