Vertical alignment in CSS Grid

Question

I'm trying to use CSS grids to vertically align an unordered list. I am getting something like this:

*A*******
*B      *
*C*******
*********
*       *
*********
*********
*       *
*********

As you see grid template rows are made correctly but list items don't get placed in them properly. I've searched for this problem but I got no results(most of "griddings" were done using methods other than CSS Grid).

.aside{
  padding: 20px;
  box-sizing: border-box;
  border:1px solid black;
  border-radius: 5px;
  background-color: rgba(200,30,140,0.5);
  display: grid;
  grid-template-rows: repeat(3,50px);
  grid-template-columns: 1fr;
}

.aside ul{
  list-style-type: none;
}

.aside ul li:nth-child(1){
  grid-row: 1/2;
  background-color:white;
}

.aside ul li:nth-child(2){
  grid-row: 2/3;
  background-color:cyan;
}

.aside ul li:nth-child(3){
  grid-row: 3/4;
  background-color:red;
}

<div class="aside">
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
</div>

Michael Benjamin · Accepted Answer · 2018-01-14T18:38:06.717

Keep in mind that grid container properties only work between parent and child elements.

So, in your code, if the grid container is the .aside element, then your grid item properties will not work on the li elements: they are descendants beyond the children (grandchildren, in this case) and, therefore, out of scope.

The grid item is the ul.

Instead, try something like this:

aside {
  display: grid;
  grid-template-rows: repeat(3,50px);
  grid-template-columns: 1fr;
}

<aside>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</aside>

More information:

Make grid container fill columns not rows
Proper use of flex properties when nesting flex containers (applies to grid layout, as well)

Vertical alignment in CSS Grid

1 Answers1