我正在使用CSS网格来实现卡网格布局.
但我不太知道如何调整minmax()语句来处理没有足够的项目来填充行但仍然需要它们看起来像卡片的用例!
如果我用静态100px替换最大1fr值或使用小数0.25fr,它会在较小的介质尺寸下扰乱缩放.
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-column-gap: 17px;
grid-row-gap: 25.5px;
padding-bottom: 25.5px;
}
.card {
background-color: #000;
height: 100px;
}<div class="wrapper">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>然后,如果只有几个项目
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-column-gap: 17px;
grid-row-gap: 25.5px;
padding-bottom: 25.5px;
}
.card {
background-color: #000;
height: 100px;
}<div class="wrapper">
<div class="card"></div>
<div class="card"></div>
</div>据我了解，flexbox可以做的任何事情，css-grid也应该可以做（通常更为冗长）。
但是我不知道如何用一个项目将其他项目推到 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>看看所有单元格如何调整大小以适应其内容，最后一个单元格li将其他单元格推开以显示在最后吗？
我如何在不修改我的HTML来添加元素的情况下使用CSS网格呢？
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 …
突出强调了Flexbox用于1-D，而Grid用于2-D，但是我还没有找到清楚的解释，为什么不能将Grid用于1-D并替代Flexbox。在我来到最接近的就是
但是您也可能会争辩说，像这样的纯一维布局在Flexbox中更强大，因为Flexbox允许我们更轻松地移动这些元素（例如，将它们全部移动到一侧或另一侧，更改其顺序，将它们均匀地隔开等）。
我将Grid和Flexbox用于基本布局：框在页面上的一般放置以及一些动态的（通常是堆叠的）。美观的（烤面包机，模式，...）通过框架进行管理。我还没有发现Grid无法立即替换Flexbox的情况（即没有高级CSS 技巧或很多代码）。
以上面的引用为例，提到的所有“动作”都可以在Grid中直接使用，通常具有与Flexbox相同的语义。
Flexbox涵盖哪些难以或无法通过Grid管理的基本领域？
编辑：浏览器支持并不重要（我只使用常绿的浏览器，如果需要可以切换）