Assessment wanted for Grid layout 1 skill test by frozinFayaGh

MDN Learn
#1

Assessment wanted for Grid layout skill test
This is the test 1 on codepen
This is test 2
This is test 3
This is test 4.
Thank you!!!

#2

Hi there @Frozin_Faya_Gh!

Some great work here, well done! I had a few comments — see below.

For the first test, it works fine, but you only need this CSS:

.grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

For test 2, you don’t need the z-index — the second grid item should beon top of the first, and it comes later in the source order anyway.

test 3 is perfect!

For test 4, you are on the right track with attempting to do the tag layout with flexbox, but you can actually do this in a pretty simple manner:

.container{
  width: 100%;
  display: grid;
  grid-template-columns:repeat(3, 1fr) ;
  grid-gap: 10px;
  gap: 10px;
  justify-content: center;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#3

Thank you very much!!

But please, in the test 2, it also had,

“Additional questions:
Can you now cause the first item to display on top without changing the order of items in the source?” in the latter part .
That is why I included the z-index.

#4

Oh, I’m sorry, I missed the additional question :wink:

#5

Thank you very much for your quick response and all your corrections are understood.
Thank you!!

My way to floats :walking_man: :walking_man: :walking_man: