FAQ: Advanced CSS Grid - Align Items

This community-built FAQ covers the “Align Items” exercise from the lesson “Advanced CSS Grid”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Learn CSS

FAQs on the exercise Align Items

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2. The container has three grid items that do not have a specified width.
3. Without setting the align-items property, these elements will span the height of the row they are in (400 pixels).

This section of Align Items is a direct copy of theJustify Items exercise, but should’nt the word width in 2. have been replace with height as we are now talking about block level alignment and rows?


I think it’s correct. If it said ‘height’ in #2, then it would become a false statement, as it does specify the height in #1 (400px).

I think tysker86 is right. The grid-template-rows property specifies the height of each grid row, but not the height of each item. These two heights are different. That’s why the align-items property can make a difference by setting where to vertically locate an item inside the grid row.

In this lesson, setting the value of “align-items” to “stretch” gives us the same result as not using the property at all. Since the default behaviour of items is to take up the whole row, when would we use “align-items: stretch;”?


To override other declarations. Say we had many grids with classes of grid and we set their align-items property to start, but we wanted the grid with an class of stretch to have an align-items property of stretch, we could simply select it and do just that

.grid {
  border: 1px solid #000;
  width: 1000px;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;

.stretch {
  align-items: stretch;

Why does the property work on only one column? It only changes the position of the first item in each row.

Can someone explain to me why are they called “justify-items” & “justify-content”? Why “justify”? It helps me to understand the functions of the code which helps me to rmb it. Appreciate any clarifications so that i can move on. Thank you!