Элементы в ячейке сетки CSS не выравниваются по концу или центру

Question

В моей nav области сетки мне нужно выровнять список по вертикальному концу или хотя бы к центру, я попытался align-items, align-content с end, flex-end, center, но, похоже, ничего работа!

Как выровнять список по низу nav?

.wrapper {
  display: grid;
  grid-template-areas:
    "nav nav nav nav nav nav nav nav nav nav nav nav"
    "ft  ft  ft  ft  ft  ft  ft  ft  ft  ft  ft  ft";
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 0.5em;
}

#nav {
  grid-area: nav;
  height: 200px;
}

#list {
  list-style: none;
  background: darkcyan;
}


#footer {
  grid-area: ft;
}

.wrapper > * {
  background: #444;
  color: #fff;
  padding: 1em;
}

<div class="wrapper">
  <nav id="nav">
    <ul id="list">
      <li><a href="#" class="nav-link">Nav 1</a></li>
      <li><a href="#" class="nav-link">Nav 2</a></li>
      <li><a href="#" class="nav-link">Nav 3</a></li>
    </ul>
  </nav>
  <footer id="footer">Footer</footer>
</div>

Answer 1

.wrapper {
  display: grid;
  grid-template-areas:
    "nav nav nav nav nav nav nav nav nav nav nav nav"
    "ft  ft  ft  ft  ft  ft  ft  ft  ft  ft  ft  ft";
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 0.5em;
}

#nav {
  grid-area: nav;
  height: 200px;
  
  /* new */
  display: flex;
  align-items: flex-end;
}

#list {
  list-style: none;
  background: darkcyan;
  
  /* new */
  flex: 1;
}

#footer {
  grid-area: ft;
}

.wrapper > * {
  background: #444;
  color: #fff;
  padding: 1em;
}

<div class="wrapper">
  <nav id="nav">
    <ul id="list">
      <li><a href="#" class="nav-link">Nav 1</a></li>
      <li><a href="#" class="nav-link">Nav 2</a></li>
      <li><a href="#" class="nav-link">Nav 3</a></li>
    </ul>
  </nav>
  <footer id="footer">Footer</footer>
</div>

Подробнее:

• Свойства сетки не работают с элементами внутри контейнера сетки
• Центрирование в сетке CSS

Answer 2

Не уверен на 100%, что вы имеете в виду, но вы можете выровнять текст внутри контейнера с помощью text-align: center / right. Вы можете выровнять контейнер по центру с помощью margin-left: auto; и поле справа: авто; удалить поле справа: авто; для правильного выравнивания.