Help wanted for Grid Layout 2 Test

MDN Learn
1

Hello!

I have successfully completed the first part of this skill test. But I have no idea how to solve the additional question -

Can you now cause the first item to display on top without changing the order of items in the source?

View the Grid Layout 2 skill test.


Here’s my CSS so far -

.grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-template-rows: 100px 100px 100px;
   gap: 10px;
}

.item1 {
   grid-column: 1 / 4;
   grid-row: 1 / 3;
}

.item2 {
   grid-column: 2 / 5;
   grid-row: 2 / 4;
}
2

Hello @Arittra

check the z-index :wink:

hope that help and have a nice day :slight_smile:

1 Like
3

Thanks a lot! Made sense :slight_smile:

4

you very welcome :slight_smile: