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>

更多细节：

• Grid properties not working on elements inside grid container
• Centering in CSS Grid

Answer 2

不是100％确定你的意思，但你可以使用text-align：center / right对齐容器内的文本。您可以使用margin-left：auto将容器与中心对齐;和保证金权利：auto;删除margin-right：auto;正确对齐。