Assessment wanted for grid skill test 1 (Tasks 1-4)

MDN Learn
#1

Assessment wanted for grid skill test 1 (Tasks 1-4)

Link to task: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grid_skills#task_1

Links to my code:
Task-1: https://jsfiddle.net/EiNzp/dz2ythjg/
Task-2: https://jsfiddle.net/EiNzp/epnqjL6v/4/
Task-3: https://jsfiddle.net/EiNzp/9pkfo3va/
Task-4: https://jsfiddle.net/EiNzp/hskxbtcw/2/

Thanks :wink:

#2

And again, everything is correct @EiN :medal_sports:

If have an additional question for task 2: You used z-index which is fine. There is another property that is more the grid/flexbox way. Can you find out which?

Cheers,
Michael

2 Likes
#3

Thank you. An excellent follow-up question from you once again helped me better understand the properties of this topic. For some reason, I did not think that the order property would affect the display order along the Z axis. I considered it only as a property of the order along the X and Y axes.
My answer:
.item1 { order: 1;} or .item2 { order: -1;}

2 Likes
#4

Correct!
You can think of it as the painting order. So when an item gets painted after another, it gets painted over the other item.

3 Likes
#5

Hi , Couldn’t it be possible to use grid instead of flexbox in the #Task 4 for tags ,
Thanks

#6

Hi @Harshit_Dubey and welcome to the community :wave:

Yes, that would also be possible. It may not exactly look like in the solution image, but in general that would be a good idea.

Michael

#7

Could anyone check my code and give some opinion on it.

Code Links:
Task1: https://jsfiddle.net/a/1fup48qj/5/
Task 2: https://jsfiddle.net/khubaib1/1fup48qj/3/
Task 3 : https://jsfiddle.net/khubaib1/1fup48qj/1/
Task 4: https://jsfiddle.net/khubaib1/1fup48qj/