CSS网格:从底部填充单元格

问题描述 投票:1回答:1

我有一个3行的CSS网格。可能少于3个项目要填充,我想从底部开始填充。

我已经创建了一个jsFiddle供您使用,但目前无法完成我想要的操作。

HTML

<div>
<p>Last item</p>
<p>Second last item</p>
<p>Top item</p>
</div>

CSS

div {
  display: grid;
  grid-template-columns: 1;
  grid-template-rows: repeat(3, 1fr);
  /* MISSING RULE */
}

实际输出:

Last item
Second last item
Top item

所需的输出:

Top item
Second last item
Last item

如果可能,我想对包含网格的<div>应用一个规则,而不是对网格中的项目应用单独的规则。

css css-grid
1个回答
0
投票

如果要使用grid,将是这样。我修改了您的html。您必须为网格子项写css属性,从何处开始和从何处结束。 grid-row-start:grid-row-end:

  .grid-item{
      border: 2px solid red;
      border-raidus: 5px;
      height: 200px;
      padding: 10px;
      width: 300px;
      margin-left: auto;
      margin-right: auto;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, 1fr);
    }
    .grid-item p{
      margin: 0;
    }
    .grid-item .first-item{
      grid-row-start: 1;
    }
    .grid-item .last-item{
      grid-row-start: 3;
    }
<div class="grid-item">
        <p class="last-item">Last item</p>
        <p class="second-item">Second last item</p>
        <p class="first-item">Top item</p>
    </div>
    

如果要使用flexbox,将使用two行代码。

<div>
    <p>Last item</p>
    <p>Second last item</p>
    <p>Top item</p>
</div>

[CSS为此

div{
    display: flex;
    flex-direction: column-reverse;
}

[flex-direction CSS属性设置将弹性项目放置在定义主轴和方向(法向或反向)的弹性容器中的方式。

© www.soinside.com 2019 - 2024. All rights reserved.