How could this be logical

[Hamza-Noah]

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?

<style>
.item1 {
  background: LightSkyBlue;
}

.item2 {
  background: LightSalmon;
}

.item3 {
  background: PaleTurquoise;
}

.item4 {
  background: LightPink;
}

.item5 {
  background: PaleGreen;
}

.container {
  font-size: 40px;
  min-height: 300px;
  width: 100%;
  background: LightGray;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  /* Only change code below this line */
  align-items: end;

  /* Only change code above this line */
}
</style>

<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>

Challenge: Align All Items Vertically using align-items

Link to the challenge:

freeCodeCamp.org

[ALLESS]

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.

[Hamza-Noah]

I have tried to test this on a new browser and the result is the same it seems there are no issues related to the browser cause I have tried it on codepen and it gives me the same result as I got here

so the problem as I explained is in the logic of the CSS grid and how it really works why it doesn’t aligned the items fully to the end of the container

[bbsmooth]

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.

[ALLESS]

Mod Test requested @kevinSmith

[kevinSmith]

We’ve created a 3X3 grid with this:

  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;

With web, flex-direction defaults to row, so the cross axis is vertical. So align-items will affect the vertical alignment.

To make it clearer, let’s have two rows.

    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;

I think it is clearer now. There is an imaginary sectioning of the available space into an imaginary grid. The align-items will determine how they will sit in those grid boxes.

Try this css:

  .container {
    font-size: 40px;
    width: 100%;
    height: 300px;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    border-color: green;
    grid-gap: 10px;
    border: 1px solid red;
    align-items: start;
  }

Change the align-items from start, to center, to end, and watch them shift vertically in their allotted space.

The css tricks site has a great guide on flex (I often use it as a reference) but there appears to be a problem with their site atm.