从CSS网格的底部开始填充单元格 [英] Filling cells starting from the bottom in CSS Grid

问题描述

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

I have a CSS grid with 3 rows. There may be less than 3 items to fill it, and I want to start filling it from the bottom.

我已经创建了一个 jsFiddle 供您使用，但目前无法使用做我想做的.

I've created a jsFiddle for you to play with, but it currently fails to do what I want.

html, body, div {
  height: 100%;
}

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

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

实际输出:

Last item
Second last item
Top item

所需的输出:

Top item
Second last item
Last item

如果可能的话，我想对包含网格的÷ div 应用一个规则，而不是对网格中的项目应用单独的规则.

I'd like to apply one rule to the <div> that contains the grid, rather than separate rules to the items in the grid, if that is possible.

推荐答案

没有

There is no column-reverse function in CSS Grid, like there is in flexbox.

因此，仅凭容器中的一条规则就不可能从底部开始获取网格区域来填充容器.

Therefore, getting grid areas to populate a container starting from the bottom isn't possible with a single rule in the container.

这是它在flexbox中的工作方式:

Here's how it would work in flexbox:

div {
  display: flex;
  flex-direction: column-reverse;
  height: 100vh;
}

p {
  flex: 1;
}


/* demo styles */
p {
  margin: 0;
  background-color: lightgreen;
}
p + p {
  margin-bottom: 10px;
}
body {
  margin: 0;
}

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

这篇关于从CSS网格的底部开始填充单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！