Items in css grid cell are not aligning to end or center

Question

In my nav grid area I need to align the list to the vertical end or at least center, I tried align-items, align-content with end, flex-end, center but nothing seems to work!

How can I align the list to the bottom of the 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>

score 2 · Answer 1 · answered Sep 14 '18 at 15:17

2

Not 100% sure what you mean, but you can align text inside a container with text-align: center/right. You can align a container to the center with margin-left:auto; and margin-right:auto; remove margin-right:auto; for right alignment.

answered Sep 14 '18 at 15:17

trainmania100

382
2
21

score 1 · Accepted Answer · answered Sep 14 '18 at 15:18

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

More details:

so the cell is just like any other `div` with `display: block`, nice catch, thanx! — Siraj Kakeh, Sep 14 '18 at 15:23

Items in css grid cell are not aligning to end or center

2 Answers2