Hello again! Need assessment for grid layout skills tests.
1 Like
Excellent job on all four task, @VladimirK! Everything is correct!
You used z-index to solve the additional question of task 2. This is perfectly fine. There is another possibility to do this that is more of “the grid way” to do this.
Can you find out which property I’m talking about?
Michael
2 Likes
Thank you! I can use order: 1 for item1 (item2 will be before item1). Order value from Flexbox lesson but it is works.
2 Likes
That’s correct!
order was covered in the Flexbox lesson, but can actually be used for both flex and grid.
Good job!
2 Likes
Ok, thanks you! Why order dont swap positions of .item1 and item2 like in flex cases?
Like this for example.
You get an extra point for this excellent question 
The position indeed changes when the elements are automatically placed like in task 4. When you add a new class to the second card in task 4 and set the property order: 1; for it, it will jump to the last position.
On the other hand in task 2 we have exactly defined the positions of our elements with grid-column and grid-row and therefore only their painting order changes. item1 gets painted after item2 and appears on top).
Michael
1 Like
@mikoMK one question.
in task 2. grid-column: 2 / 5; is used but we have only 4 columns right.
Why is this written this way? Shouldn’t it be 2/4 or something.
Hi @pankaj_kumar and welcome to the community 
grid-column: 2 / 5 is actually correct. Those numbers stand for the lines between the columns and at the start and end of the grid. There’s always one line more than there are columns. In Firefox DevTools you can display the grid by clicking on the “grid” button in the inspector. In this screenshot you also see that it’s possible to use negative numbers to count from the right.
Have a nice day!
Michael
2 Likes