Question

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

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

如您所见，网格模板行正确生成但列表项未正确放入其中。我已经搜索过这个问题，但是我没有得到任何结果（大多数“网格化”都是使用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>

Answer 1

请记住，网格容器属性仅在父元素和子元素之间起作用。

因此，在您的代码中，如果网格容器是.aside元素，那么您的网格项属性将不适用于li元素：它们是子代之外的后代（孙子，在此案例），因此，超出范围。

网格项是ul。

相反，尝试这样的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

更多信息：

Make grid container fill columns not rows
Proper use of flex properties when nesting flex containers（也适用于网格布局）

CSS Grid中的垂直对齐

1 个答案: