CODEWITHSUNDEEP
csscss-grid
M-J
M-J

Reputation: 1103

Vertical alignment in CSS Grid

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>

Upvotes: 2

Views: 1968

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371123

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:

Upvotes: 1

Related Questions