align list items vertically inside a CSS grid

Question

How do you veritcally align list items inside a CSS grid?

Doing vertical align middle does not seem to do anything. Why does vertical align middle not work inside the CSS grid?

Below is the first attempt:

.sublist-grid {
    display: grid;
}

.list-grid {
    display: grid;
    display: -ms-grid;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto;
}

.list-grid li {
    line-height: 30px;
    font-size: 14px;
    padding-left: 30px;
    padding-right: 10px;
    list-style-position: inside;
    width: 230px;
    text-transform: none;
}

<div class="sublist-grid" style="left: -250px;display: grid;">
<ul class="list-grid">
<li>
<a href="#" class="">List item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList item</a>
</li>
</ul>
</div>

I need to have the items on the left (that are only one line) to align in the middle with the items that are longer.

I found:

Vertical align inside css grid

.sublist-grid {
    display: grid;
}

.list-grid {
    display: grid;
    display: -ms-grid;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto;
}

.list-grid li {
    /*Answer suggests flex on parent, flex 1 on child*/
    display: flex;

    line-height: 30px;
    font-size: 14px;
    padding-left: 30px;
    padding-right: 10px;
    list-style-position: inside;
    width: 230px;
    text-transform: none;
}

.list-grid li a {
    flex: 1;
}

<div class="sublist-grid" style="left: -250px;display: grid;">
<ul class="list-grid">
<li>
<a href="#" class="">List item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList item</a>
</li>
</ul>
</div>

Essentially (as far as I understand) this answer suggests to add flex and give flex: 1 to the child but that doesn't work.

How to vertically align objects in CSS when working with CSS grids?

An answer with 5 upvotes (accepted answer only has 2) simply suggests to add align-items: center; but it does not work:

.sublist-grid {
    display: grid;
}

.list-grid {
    display: grid;
    display: -ms-grid;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto;
}

.list-grid li {
   /*does not work*/
    align-items: center;

    line-height: 30px;
    font-size: 14px;
    padding-left: 30px;
    padding-right: 10px;
    list-style-position: inside;
    width: 230px;
    text-transform: none;
}

<div class="sublist-grid" style="left: -250px;display: grid;">
<ul class="list-grid">
<li>
<a href="#" class="">List item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList item</a>
</li>
</ul>
</div>

Why do none of these answers work with my code? How do I get items vertically centered in a CSS grid?

score 2 · Answer 1 · answered Sep 06 '18 at 15:36

align-items does work but you have to place it on the grid-parent / container

.sublist-grid {
    display: grid;
}

.list-grid {
    display: grid;
    display: -ms-grid;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto;
   /*does  work*/
    align-items: center;
}

.list-grid li {


    line-height: 30px;
    font-size: 14px;
    padding-left: 30px;
    padding-right: 10px;
    list-style-position: inside;
    width: 230px;
    text-transform: none;
    border:1px solid grey;
}

<div class="sublist-grid" style="left: -250px;display: grid;">
<ul class="list-grid">
<li>
<a href="#" class="">List item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList item</a>
</li>
</ul>
</div>

score 1 · Answer 2 · answered Sep 06 '18 at 15:42

Ok I got it:

It's:

.list-grid li {
   display: flex;
   align-items: center;
}

So:

.sublist-grid {
    display: grid;
}

.list-grid {
    display: grid;
    display: -ms-grid;
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto;
}

.list-grid li {
    /*this is it*/
    display: flex;
    align-items: center;

    line-height: 30px;
    font-size: 14px;
    padding-left: 30px;
    padding-right: 10px;
    list-style-position: inside;
    width: 230px;
    text-transform: none;
}

<div class="sublist-grid" style="left: -250px;display: grid;">
<ul class="list-grid">
<li>
<a href="#" class="">List item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList itemList itemList itemList item</a>
</li>
<li>
<a href="#" class="">List itemList itemList item</a>
</li>
</ul>
</div>

align list items vertically inside a CSS grid

2 Answers2