Why aren't justify-items, justify-content, etc working in grid cell alignment?

Question

I want to create even spacing between my ul list: New Upload and Share. See example below.

I use justify-items: space-between among other variations to try to evenly distribute my ul items but with no obvious effect. I do not understand as the container appears to have space to redistribute the grids along the inline axis. So why isn't it working?

Update: I see that the actual problem is that the ul isn't spanning to the right end of the column, therefore, it is confined to the second column only.

* {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

div,
li {
  border: 1px solid rgb(142, 28, 47);
}

.header {
  display: grid;
  grid-template-columns: 5fr 1fr 1fr;
}

ul {
  grid-template-columns: 2 / 4;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: space-between;
}

<div class="header">
  <div class="Search">Search</div>
  <div class="Alert">Alert</div>
  <div class="User Info">User Info</div>
  <div class="Intro">Hi There</div>
  <ul>
    <li>New</li>
    <li>Upload</li>
    <li>Share</li>
  </ul>
</div>

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D
– Paulie_D, Commented Aug 5 at 20:18
space-between isn't a value for justify-items. See the documentation - justify-items — MrJoky
– MrJoky, Commented Aug 6 at 6:38
Perhaps you mean to use justify-content: space-between. But the same documentation (see the comment above) says that it is applicable to a flex container you're not using. — Sergey A Kryukov
– Sergey A Kryukov, Commented Aug 6 at 7:37
I changed it to justify-content. However, the problem remains that the ul isn't spanning the rest of the grid track or columns to the right end. — lunarchild
– lunarchild, Commented Aug 7 at 14:49

Abhishek Singh · Accepted Answer · 2025-08-06 14:28:11Z

0

<style>
  * {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  div, li {
    border: 1px solid rgb(142, 28, 47);
  }

  .header {
    display: grid;
    grid-template-columns: 5fr 1fr 1fr;
  }

  ul {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
</style>

<div class="header">
  <div class="Search">Search</div>
  <div class="Alert">Alert</div>
  <div class="User Info">User Info</div>
  <div class="Intro">Hi There</div>
  <ul>
    <li>New</li>
    <li>Upload</li>
    <li>Share</li>
  </ul>
</div>
justify-items controls how items are aligned inside each individual grid cell, not how the items themselves are spaced in the container.
space-between is not a valid value for justify-items.

answered Aug 6 at 14:28

Abhishek Singh

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why aren't justify-items, justify-content, etc working in grid cell alignment?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related