css 网格自动填充方向?

问题描述 投票:0回答:1

也许这是一个奇怪的问题。我在 css 文档中找不到任何答案。 请看这个:

这有点像

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

右边有一个自动栏。现在,如果我想反转自动填充功能的方向怎么办?我的意思是,图像在右边,新的空列在左边?有什么办法吗?

css layout css-grid
1个回答
0
投票

您可以使用

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>

© www.soinside.com 2019 - 2024. All rights reserved.