FAQ: Advanced CSS Grid - Align Items

Frequently Asked Questions CSS FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

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

"
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?

5 Likes
3

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).

4

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.

2 Likes
5

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;”?

3 Likes
6

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;
}
1 Like
7

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

1 Like
8

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!

1 Like
9

Why is it that when I add a bunch of text to the meal description, it overflows the column? I was expecting it to stay inside the column and stretch it as we are told about the divs when you use align-items:

They will only be as tall as necessary to contain their content (the words Card 1, etc).

10

I think the reason why it is overflowing is because we already specify the height which is 450px. So adding more text to it, the text is going to overflow the 450px height which is already defined.

11

I get what you trying to say. But if we specify the height for the grid-items, the items are not going to stretch, even if we defined align-items: stretch on the grid-container.

Same rule also apply to the justify-items (Note this time we are working with the width not height).

12

Why is this code not working?

the text in two of the items in column 2, in chrome (screenshot 1) are not being shown the same way they are shown in codeacademy site.

Screesnhot 1 - text overflowing when the index.html file is open in chrome.

image
image1667×925 194 KB

13

In code academy website it is shown without overflowing (see screenshot below).

image
image1301×854 217 KB

14

My understanding is that without specifying a height, or ‘align-items: stretch,’ the items will expand as necessary to fit their content. If so, why if I keep all the ‘align-items’ properties commented out do the items still remain the size of their rows? Why aren’t they just big enough to cover the necessary content?

Is this because stretch is the default value? If this is the case, why is it necessary to specify it?

15

Yes, default value is “stretch”. It is not necessary, but it is good to be explicit.

1 Like
16

The first answer, to the question posed in this thread, does a good job of explaining that.
justify-content, justify-items, align-self.