在可扩展网格框中使用订单属性

Question

这是Change the column order in a css grid上的一个“跟进”问题，>

在该问题中，给出了一种解决方案，用于在使用较小的屏幕时对网格的单元进行排序。它可以工作，但是不是“可扩展的”：因为它只能在具有预定义行数的网格上工作。根据上述问题给出的解决方案：

3。 order

[Grid Layout中的order属性与Flex Layout中的属性相同。

 
 grid-container {
   display: grid;
   grid-template-columns: 15% 1fr 25%;
   grid-auto-rows: 50px; /* for demo */
   grid-gap: 10px;
 }
 
 @media ( max-width: 500px ) {  
   grid-container         { grid-template-columns: 1fr 1fr;  }
   grid-item:nth-child(1) { order: 1; }
   grid-item:nth-child(2) { order: 3; grid-column: 1 / 3; }
   grid-item:nth-child(3) { order: 2; }
 }
 
 /* non-essential decorative styles */
 grid-item {
   border: 1px solid gray;
   background-color: lightgreen;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 grid-item:nth-child(2) {
   background-color: orange;
 }
 
 
 
 <grid-container>
   <grid-item>1</grid-item>
   <grid-item>2</grid-item>
   <grid-item>3</grid-item>
 </grid-container>
 
 

jsFiddle demo 3

在我们的应用程序中，“行”的数量没有给出，并且可以更多。测试是：

 grid-container {
   display: grid;
   grid-template-columns: 15% 1fr 25%;
   grid-auto-rows: 50px; /* for demo */
   grid-gap: 10px;
 }

 @media ( max-width: 500px ) {  
   grid-container         { grid-template-columns: 1fr 1fr;  }
   grid-item:nth-child(3n-2) { order: 1; }
   grid-item:nth-child(3n-1) { order: 3; grid-column: 1 / 3; }
   grid-item:nth-child(3n) { order: 2; }
 }

 /* non-essential decorative styles */
 grid-item {
   border: 1px solid gray;
   background-color: lightgreen;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 grid-item:nth-child(3n-1) {
   background-color: orange;
 }
 <grid-container>
   <grid-item>1</grid-item>
   <grid-item>2</grid-item>
   <grid-item>3</grid-item>
   <grid-item>4</grid-item>
   <grid-item>5</grid-item>
   <grid-item>6</grid-item>
   <grid-item>7</grid-item>
   <grid-item>8</grid-item>
   <grid-item>9</grid-item>
   <!-- etc -->
 </grid-container>
jsfiddle

正如可以快速看到的顺序，所有“第二个”单元格（2、5、8 ...）一直到底部，而不是将每个单元格保持为3。在一种简单的ascii艺术中，我想： >

c1 c3
c2 c2
c4 c6
c5 c5
c7 c9
c8 c8
（如何执行此操作？

这是有关更改css网格中的列顺序的“后续”问题，在该问题中给出了一种解决方案，用于在使用较小的屏幕时对网格的单元进行排序。它有效，但是...

Answer 1

原始问题中的代码没有“预定义的行数”。实际上，根本没有定义任何行。所有行均为implicit。 （仅提供使用grid-auto-rows的行高）。

刚好有三个网格项目。在您的问题中，您希望布局可以处理更多的项目。这似乎是唯一的区别。