也许这是一个奇怪的问题。我在 css 文档中找不到任何答案。 请看这个:
这有点像
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
右边有一个自动栏。现在,如果我想反转自动填充功能的方向怎么办?我的意思是,图像在右边,新的空列在左边?有什么办法吗?
您可以使用
direction: rtl
并明确说明子项的顺序,如下所示。您还需要重置子项中的文本方向。见下文。
.container {
display: grid;
direction: rtl;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.one {
/* I use negative numbers here so although '-1' is the first item, it appears last but makes it easier to remember */
order: -1;
}
.two {
order: -2;
}
.image {
/* have to reset the text direction here */
direction: ltr;
color: #2a7e1f;
text-transform: uppercase;
}
<div class="container">
<div class='image one'><img src="https://picsum.photos/id/237/200/200" alt="">
Test 1
</div>
<div class='image two'><img src="https://picsum.photos/id/238/200/200" alt="">
Test 2
</div>
</div>