HTML – 自动边距可以像在Flexbox中一样在CSS Grid中工作吗？

概述据我所知,任何flexbox都可以做,css-grid也应该能够做到(通常更加冗长). 然而,我无法弄清楚如何使用一个项目模仿一个Flexbox,其中一个项目用margin：auto来推掉其他项目 ul { list-style-type: none; padding: 0; display: flex; flex-direction: column; outline: 1px @H_502_1@ 据我所知,任何flexBox都可以做,css-grID也应该能够做到(通常更加冗长).

然而,我无法弄清楚如何使用一个项目模仿一个FlexBox,其中一个项目用margin：auto来推掉其他项目

ul {  List-style-type: none;  padding: 0;  display: flex;  flex-direction: column;  outline: 1px solID red;  height: 200px;  background-color: lime;}li {  background-color: cornsilk;}li:last-of-type {  margin-top: auto;}

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

看看所有单元格的大小是如何根据其内容调整的,最后一个单元格将其他单元格推到最后？

如何在不修改我的HTML添加元素的情况下使用css-grID执行此 *** 作？

ul {  List-style-type: none;  padding: 0;  display: grID;  outline: 1px solID red;  height: 200px;  background-color: lime;}li {  background-color: cornsilk;}li:last-of-type {  margin-top: auto;}

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

这很接近,但是所有行的大小都不是min-content – 我不知道它们的大小是什么,但它不是min-content.我能得到的最接近的是添加

grID-template-rows: repeat(3,min-content);

只有当你知道提前lis的数量时才有效,但这对于flexBox版本是不必要的.

解决方法 有一种方法可以获得您的请求,这可以被视为有点Hackish,但这是有效的.

在所有列表元素和最后一个列表元素之间创建任意数量的未使用行.这里的代码片段可以在列表中使用少于99个元素：

ul {  List-style-type: none;  padding: 0;  display: grID;  outline: 1px solID red;  height: 150px;  background-color: lime;  grID-template-rows: repeat(99,max-content) 1fr [last];}li {  background-color: cornsilk;}li:last-of-type {  grID-row: last;}

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

总结

以上是内存溢出为你收集整理的HTML – 自动边距可以像在Flexbox中一样在CSS Grid中工作吗？全部内容，希望文章能够帮你解决HTML – 自动边距可以像在Flexbox中一样在CSS Grid中工作吗？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。