this challenge requires to use of the align-items property and the value should be set to the end, but how could this be logical if I am aligning the items to the end they should be aligned to the end of the container depending on the cross axis?
The answers are Correct. The test passes on the browser that I have.
If you are using DARK MODE or NIGHT MODE extension , it might need to be disabled for the curriculum.
If it isn’t dark mode causing the issues, try deactivating any browser extension that has access to freecodecamp, add blockers etc, And try updating your browser to latest version or use a different, fully updated browser…
If none of these things work, try using a different Device to complete the lesson.
If none of that works, try rebooting, resetting the browser cache, try a different browser, etc.
This is the definition of align-items that CSS Tricks uses:
“Aligns grid items along the block (column) axis (as opposed to justify-items which aligns along the inline (row) axis).”
In other words, align-items will align the items in each grid cell vertically, while justify-items will align the items horizontally. This is exactly what is happening when I add align-items: end to the challenge. If you don’t think this is working properly for you then it might be a good idea to paste a screen shot of the display pane you are seeing after adding align-items: end just to make sure we are seeing the same thing.
Also, the CSS Tricks article gives examples of how this property works and they actually have an example for align-items: end and it looks exactly like what I am seeing when I add it to the challenge.