Свойство align-items не работает в CSS Grid

Question

Я пытаюсь использовать CSS Grid для выравнивания элементов, которые будут частью навигационной панели.

Вы можете увидеть это здесь: https://jsfiddle.net/nodpekar/82p0x4hw/5/

Я не знаю, почему нижеКод не выравнивает элементы в классе navbar-items по центру.

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>

Answer 1

Вместо использования justify-content: center используйте justify-items: center.Вот и все.

#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>

Если бы вы использовали flexbox вместо сетки, то ваш код выравнивания сработал бы:

#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>

Причина этой разницы связана с различием в структуре макетов.

• Во flexbox, justify-contentприменяется непосредственно к элементам изгиба.

• В сетке justify-content применяется к столбцам сетки ( подробнее ).

• Во flexbox свойство justify-items отсутствует ( подробнее )

• В сетке justify-items применяется к элементам сетки ( подробнее )

Следовательно, чтобы ваш макет работал, используйте justify-items в сетке и justify-content в флексе.