所有沿垂直轴的中心的项目，除了最后一个使用CSS网格坐在底部的项目吗？

发布于 2025-02-02 20:57:14 字数 1547 浏览 0 评论 0原文

我正在尝试获得回答另一个问题使用'方法5 CSS网格布局在垂直轴上工作。

目的是使所有项目都沿垂直轴中心，除了最后一个使用CSS网格在底部的物品？

要求是：

中心项目的数量可能会有所不同。
容器的高度可能会有所不同。
无法更改HTML。

如您所见，我第一次尝试从水平转换为垂直行业的尝试是不起作用的：

为什么这些物品是错误的？
为什么最后一个物品坐在底部？
我该如何解决？

ul {
  display: grid;
  grid-template-columns: 1fr repeat(3, auto) 1fr;
  grid-column-gap: 5px;
  justify-items: center;
}

ul li:nth-child(1) {
  grid-column-start: 2;
}

ul li:nth-child(4) {
  margin-left: auto;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
  background: pink;
}

li {
  padding: 5px;
  background: #aaa;
}

p {
  text-align: center;
}


/* My attempt to get this working on a vertical layout */

ol {
  height: 400px;
  display: grid;
  grid-template-rows: 1fr repeat(3, auto) 1fr;
  row-gap: 5px;
  justify-items: center;
}

ol li:nth-child(1) {
  grid-row-start: 2;
  background-color: coral;
}

ol li:nth-child(4) {
  margin-top: auto;
  background-color: chartreuse;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>| true center |</span></p>

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>

原文

I'm trying to get the answer to another question to work on the vertical axis using 'Method 5 CSS Grid Layout'.

The aim is to get all items centered along the vertical axis except the last which should sit on the bottom using CSS Grid?

The requirements are:

The number of centered items can vary.
The height of the container can vary.
Can't change the HTML.

As you can see my first attempt at translating from the horizontal to the vertical is not working:

Why are the items out of order?
Why isn't the last item sitting on the bottom?
How do I fix this?

ul {
  display: grid;
  grid-template-columns: 1fr repeat(3, auto) 1fr;
  grid-column-gap: 5px;
  justify-items: center;
}

ul li:nth-child(1) {
  grid-column-start: 2;
}

ul li:nth-child(4) {
  margin-left: auto;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
  background: pink;
}

li {
  padding: 5px;
  background: #aaa;
}

p {
  text-align: center;
}


/* My attempt to get this working on a vertical layout */

ol {
  height: 400px;
  display: grid;
  grid-template-rows: 1fr repeat(3, auto) 1fr;
  row-gap: 5px;
  justify-items: center;
}

ol li:nth-child(1) {
  grid-row-start: 2;
  background-color: coral;
}

ol li:nth-child(4) {
  margin-top: auto;
  background-color: chartreuse;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>| true center |</span></p>

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

絕版丫頭 2025-02-09 20:57:14

您几乎很好，您需要添加网格 - auto-flow：column。如果要在相对的轴上进行相同的操作，则必须更改流量算法。

ul {
  display: grid;
  grid-template-columns: 1fr repeat(3, auto) 1fr;
  grid-column-gap: 5px;
  justify-items: center;
}

ul li:nth-child(1) {
  grid-column-start: 2;
}

ul li:nth-child(4) {
  margin-left: auto;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
  background: pink;
}

li {
  padding: 5px;
  background: #aaa;
}

p {
  text-align: center;
}


/* My attempt to get this working on a vertical layout */

ol {
  height: 400px;
  display: grid;
  grid-template-rows: 1fr repeat(3, auto) 1fr;
  grid-auto-flow: column;
  row-gap: 5px;
  justify-items: center;
}

ol li:nth-child(1) {
  grid-row-start: 2;
  background-color: coral;
}

ol li:nth-child(4) {
  margin-top: auto;
  background-color: chartreuse;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>| true center |</span></p>

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>

You are almost good, you need to add grid-auto-flow: column. You have to change the flow algorithm if you want to do the same in the opposite axis.

ul {
  display: grid;
  grid-template-columns: 1fr repeat(3, auto) 1fr;
  grid-column-gap: 5px;
  justify-items: center;
}

ul li:nth-child(1) {
  grid-column-start: 2;
}

ul li:nth-child(4) {
  margin-left: auto;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
  background: pink;
}

li {
  padding: 5px;
  background: #aaa;
}

p {
  text-align: center;
}


/* My attempt to get this working on a vertical layout */

ol {
  height: 400px;
  display: grid;
  grid-template-rows: 1fr repeat(3, auto) 1fr;
  grid-auto-flow: column;
  row-gap: 5px;
  justify-items: center;
}

ol li:nth-child(1) {
  grid-row-start: 2;
  background-color: coral;
}

ol li:nth-child(4) {
  margin-top: auto;
  background-color: chartreuse;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
<p><span>| true center |</span></p>

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>

回复收藏 0 原文

~没有更多了~