如何为网格中的项目指定首选列

发布于 2025-02-10 18:41:00 字数 1265 浏览 1 评论 0原文

我想让我的blue项目更喜欢放在左侧，我所有的red> red项目更喜欢放置在右侧。所有项目都应从第一行开始，如果有更多类型，则应该能够使用另一列。

在@Temani AFIF的一些帮助下，我尝试了此操作，但由于它们没有包裹到另一列而没有起作用。

.grid {
  display: grid;
  grid-auto-flow: dense;
  width: 300px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: .25rem;
}

.foo {
  background: blue;
  grid-column-start: 1;
  grid-column-end: 1;
}
.bar {
  background: red;
  grid-column-start: 2;
  grid-column-end: 2;
}

.item {
  padding: 0.5rem 1rem;
  color: white;
}

<div class="grid">
  <div class="item foo">Item 1</div>
  <div class="item foo">Item 3</div>
  <div class="item foo">Item 5</div>
  <div class="item foo">Item 7</div>
  <div class="item foo">Item 9</div>
  <div class="item bar">Item 2</div>
  <div class="item bar">Item 4</div>
  <div class="item bar">Item 6</div>
</div>

我想要的就是这样：

CSS是否可以？

原文

I want to have my blue items prefer to be placed on the left side and all my red items prefer to be placed the right side. All items should start from the first row and if there are more one type, they should be able to use the other column.

With some help from @Temani Afif, I tried this, but it doesn't work as they are not wrapping into the other column.

.grid {
  display: grid;
  grid-auto-flow: dense;
  width: 300px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: .25rem;
}

.foo {
  background: blue;
  grid-column-start: 1;
  grid-column-end: 1;
}
.bar {
  background: red;
  grid-column-start: 2;
  grid-column-end: 2;
}

.item {
  padding: 0.5rem 1rem;
  color: white;
}

<div class="grid">
  <div class="item foo">Item 1</div>
  <div class="item foo">Item 3</div>
  <div class="item foo">Item 5</div>
  <div class="item foo">Item 7</div>
  <div class="item foo">Item 9</div>
  <div class="item bar">Item 2</div>
  <div class="item bar">Item 4</div>
  <div class="item bar">Item 6</div>
</div>

What I want is something like this:

Here the red items start from the first row like the blue items and the blue items can wrap into the second column if there is an uneven amount of items.

Is this possible with css?

分享到QQ

分享到微博

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

发布评论

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

故事未完 2025-02-17 18:41:00

仅指定红色的位置，并使用网格 - 自动流量：密度。那么诀窍是考虑order

.grid {
  display: grid;
  width: 300px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  grid-gap: .25rem;
}

.foo {
  background: blue;
}

.bar {
  background: red;
  grid-column-start: 2;
  order: -1;
}

.item {
  padding: 0.5rem 1rem;
  color: white;
}

<div class="grid">
  <div class="item foo">Item 1</div>
  <div class="item foo">Item 3</div>
  <div class="item foo">Item 5</div>
  <div class="item foo">Item 7</div>
  <div class="item foo">Item 9</div>
  <div class="item bar">Item 2</div>
  <div class="item bar">Item 4</div>
  <div class="item bar">Item 6</div>
  <div class="item foo">Item 10</div>
  <div class="item foo">Item 11</div>
</div>

Specify the position of the red only and use grid-auto-flow: dense. Then the trick is to consider order as well

.grid {
  display: grid;
  width: 300px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  grid-gap: .25rem;
}

.foo {
  background: blue;
}

.bar {
  background: red;
  grid-column-start: 2;
  order: -1;
}

.item {
  padding: 0.5rem 1rem;
  color: white;
}

<div class="grid">
  <div class="item foo">Item 1</div>
  <div class="item foo">Item 3</div>
  <div class="item foo">Item 5</div>
  <div class="item foo">Item 7</div>
  <div class="item foo">Item 9</div>
  <div class="item bar">Item 2</div>
  <div class="item bar">Item 4</div>
  <div class="item bar">Item 6</div>
  <div class="item foo">Item 10</div>
  <div class="item foo">Item 11</div>
</div>

回复收藏 0 原文

~没有更多了~