Use grid-area Without Creating an Areas Template, another possible answer?

Tell us what’s happening:
Hello CSS Gurus. Why the answer for this challenge can’t also be

 grid-area: 3/1/3/4;

and instead it is only

 grid-area: 3/1/4/4;

Visually, I am unable to see the difference. Could you help me shed a light on it?

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0

Challenge: Use grid-area Without Creating an Areas Template

Link to the challenge:

1 Like

To put it simply it is designed like that. If the start line and end line are same, then the end line is ignored and the browser defaults to auto setting which is default span setting of 1 . (There is an optional syntax where you can give the start line and span instead of start line and end line i.e.

.item5 {
  grid-area: 2 / 1 / span 2 / span 3;
}

)
You can read it from this stack overflow conversation. He found the documentation to make it easier for you to understand. All credit goes to this guy, I just found the answer

1 Like