I am attempting to utilize CSS grids in order to vertically align an unordered list. However, I am encountering the following layout:
*A*******
*B *
*C*******
*********
* *
*********
*********
* *
*********While the grid template rows are set up correctly, the list items are not being placed within them as expected. After researching this issue, I have found no relevant results as most "griddings" were accomplished 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>