CSS 网格中的垂直对齐

Question

我正在尝试使用 CSS 网格垂直对齐无序列表。我得到这样的东西：

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

如您所见，网格模板行制作正确，但列表项未正确放置在其中。我已经搜索过这个问题，但没有得到任何结果（"griddings" 中的大部分都是使用 CSS 网格以外的方法完成的）。

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

Answer 1

请记住，网格容器属性仅适用于父元素和子元素。

因此，在您的代码中，如果网格容器是 .aside 元素，那么您的网格项属性将不适用于 li 元素：它们是子元素（孙子、孙子、在这种情况下），因此超出范围。

网格项是 ul。

相反，尝试这样的事情：

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

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

更多信息：

Make grid container fill columns not rows
（也适用于网格布局）

CSS 网格中的垂直对齐

Vertical alignment in CSS Grid

css

css-grid