Help wanted for "Test your skills: Grid Layout"

MDN Learn
1

This is a task:“https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grid_skills#grid_layout_two”

It has a supplementary question under this task:" Can you now cause the first item to display on top without changing the order of items in the source?"

.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;
}

I don’t know.Can you help me？

2

Hello @zhao19940701

what about using this https://developer.mozilla.org/en-US/docs/Web/CSS/z-index :wink:

it would be better if you post your code on any online service in your future post

hope that help and have a nice day :slight_smile:

2 Likes
3

Especially for grids an flexboxes there is also:

This is also a possibility to solve the supplementary question.

Cheers!
Michael

2 Likes
4

Thank you. Good luck :grinning:

5

you welcome and thanks you too :slight_smile:

6 
        Thank you.Good luck！Michael.
1 Like
7

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