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!!!
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;
}
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.
Oh, I’m sorry, I missed the additional question
Thank you very much for your quick response and all your corrections are understood.
Thank you!!
My way to floats