代码之家 › 专栏 › 技术社区 › whiterook6

CSS网格在屏幕调整大小时移动列

css-grid css html

whiterook6 · 技术社区 · 1 年前

我很难想出一种在HTML页面中设置网格项的好方法。我有很多图表,每个图表都有以前的版本和现在的版本。有时它们有不同的高度,所以我决定根据需要有两列和尽可能多的行,左边是以前的图表,右边是当前的图表:

<div class="my-grid">
  <div class="chart previous">Previous</div>
  <div class="chart current">Current</div>
  <div class="chart previous">Previous</div>
  <div class="chart current">Current</div>
</div>

但是,当我的屏幕很窄时,我希望所有图表都在一列中,所有当前图表都在所有以前的图表之前。我尝试了一些CSS网格,但它不会将图表移动到前面或后面。我试着使用 grid-template-areas 但后来所有的图表都重叠了。

Here's a codepen of what I have

如果使视图变窄,则块应重新排序,使所有当前橙色块位于顶部,然后是所有以前的块,并遵循其原始顺序。

这是一张所需的广角图像(现在可以使用)

狭窄的

如何使用CSS网格或其他简单的CSS来实现这一点?我不介意重新排列HTML中的项目,只要它们在显示器上的顺序正确。

3 回复 | 直到 1 年前

whiterook6 1 年前

只需使用 grid-auto-flow: column 将项目放在各自的列中,然后当宽度足够小时,将它们全部放在一列中,并使用 order .

https://codepen.io/Paulie-D/pen/oNRqBpN?editors=1100

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
}

.previous {
  grid-column: 1;
  background-color: green;
}

.current {
  grid-column: 2;
  background-color: orange;
}

.item {
  border: 1px solid black;
}

.tall {
  height: 100px;
}

@media (max-width: 600px) {
 .grid {
   grid-template-columns: 1fr;
 }

 .previous {
  grid-column: 1;
  order:1;
 }

 .current {
  grid-column: 1;
 }
}

<div class="grid">
  <div class="item previous">Previous</div>
  <div class="item current">Current</div>
  <div class="item previous tall">Previous</div>
  <div class="item current">Current</div>
  <div class="item previous">Previous</div>
  <div class="item current">Current</div>
  <div class="item previous">Previous</div>
  <div class="item current tall">Current</div>
</div>

Salvatos 1 年前

既然你提到重新排列HTML不是一个问题,我觉得这更像是一个灵活的场景,尽管Paulie_D已经为你介绍了如何使其与网格一起工作。在HTML结构中将所有类似的元素放在一起看起来更有意义。

将所有当前元素放在一个div中,将所有以前的元素放在另一个div。两者都是列模式下的灵活框。

然后在这两列周围加一个包装。也是一个柔性盒,但水平适用于桌面,垂直适用于移动设备。 flex-direction 包装器上是唯一需要在两个视图之间更改的内容=)

<html>
 <head>
  <style>
   .grid {
display: flex;
gap: 16px;
   }

   .row-current, .row-previous {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
   }

   @media (max-width: 600px) {
.grid {
    flex-direction: column;
}
   }

   .item {
border: 1px solid black;
   }

   .tall {
height: 100px;
   }

   .previous {
background-color: green;
   }

   .current {
background-color: orange;
   }
  </style>
 </head>
 <body>
  <div class="grid">
   <div class="row-current">
    <div class="item current">Current</div>
    <div class="item current">Current</div>
    <div class="item current">Current</div>
    <div class="item current tall">Current</div>
   </div>
   <div class="row-previous">
    <div class="item previous">Previous</div>
    <div class="item previous tall">Previous</div>
    <div class="item previous">Previous</div>
    <div class="item previous">Previous</div>
   </div>
  </div>
 </body>
</html>

(作为一个附带的好处,你不需要在每个项目上指定“上一个”或“当前”类,因为它们可以通过其父项作为目标,即。 .row-current > .item 而不是 .item.current .)

-1

Syed Muhammad Hassaan 1 年前

使用CSS顺序属性

此order属性将对图表进行排序,只需将它们添加到代码中即可


.previous {
    background-color: green;
    order:2;
}

.current {
    background-color: orange;
    order:1;
}

这将根据您提供的参考图像,将当前图像排序为第一个,将先前图像排序为第二个。

了解更多信息 CSS Order Property