align-items property not working in CSS Grid

Question

I am trying to use CSS Grid to align items which will be part of a navbar.

You can see it here: https://jsfiddle.net/nodpekar/82p0x4hw/5/

I don't know why the below code does not align the items in class navbar-items in center.

body,
html {
  height: 100%;
  margin: 0;
}

#navbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.navbar-items {
  display: grid;
  align-items: center;
  justify-content: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.1/css/all.min.css" rel="stylesheet"/>
<div id="navbar">
  <div class="navbar-items">
    <p>Projects</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
  <div class="navbar-items">
    <p>Blog</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
  <div class="navbar-items">
    <p>Resume</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
</div>

It does work, though you've missed that a `p` has a default margin, and the height of the `navbar-items` is the same as the content, so no vertical centering can take place: https://jsfiddle.net/dpg9e6La/ — Asons, Sep 23 '19 at 19:29
you need to tell more via css https://jsfiddle.net/7yLftnao/ or https://jsfiddle.net/7yLftnao/1/ — G-Cyrillus, Sep 23 '19 at 19:29
@lgson to me it was horizontal centering about the arrow the keyword stands in the question title :) — G-Cyrillus, Sep 23 '19 at 19:31
@G-Cyr Yeah, you might be right, where changing the default `stretch` to `center` fixed the `span`'s horizontal alignment — Asons, Sep 23 '19 at 19:33
thank you @LGSon and G-Cyr your answers helped. I like the way LGson put the borders. Ity help me understand where I was going wrong. — Nodnin, Sep 23 '19 at 19:35
@Nodnin That's the number one trick when things looks "odd"... add a border :) — Asons, Sep 23 '19 at 19:36

Michael Benjamin · Accepted Answer · 2019-09-24T00:02:21.367

Instead of using justify-content: center, use justify-items: center. That's it.

#navbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.navbar-items {
  display: grid;
  align-items: center;
  /* justify-content: center; */
  justify-items: center; /* new */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.1/css/all.min.css"
      rel="stylesheet"/>
<div id="navbar">
  <div class="navbar-items">
    <p>Projects</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
  <div class="navbar-items">
    <p>Blog</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
  <div class="navbar-items">
    <p>Resume</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
</div>

If you were using flexbox instead of grid, then your alignment code would have worked:

#navbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.navbar-items {
  display: flex; /* adjustment */
  flex-direction: column; /* new */
  align-items: center;
  justify-content: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.1/css/all.min.css"
      rel="stylesheet"/>
<div id="navbar">
  <div class="navbar-items">
    <p>Projects</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
  <div class="navbar-items">
    <p>Blog</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
  <div class="navbar-items">
    <p>Resume</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
</div>

The reason for this difference is due to the difference in layout structures.

In flexbox, justify-content applies directly to flex items.
In grid, justify-content applies to grid columns (more details).
In flexbox, there is no justify-items property (more details)
In grid, justify-items applies to grid items (more details)

Hence, to make your layout work, use justify-items in grid and justify-content in flex.

align-items property not working in CSS Grid

1 Answers1