Question

我有未知数量的项目需要在网格中显示。我想根据需要将列数设为auto-fill，对行数没有限制。我可以使此工作正常进行：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  list-style: none;
}

<ul class="grid">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
  <li>h</li>
</ul>

但是，我也希望按列按字母顺序对项目进行排序：

a  d  g
b  e  h
c  f

我知道我可以使用grid-auto-flow: column按列而不是按行放置每个项目，但是如果这样做，我只会得到一个长行。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-flow: column;
  list-style: none;
}

<ul class="grid">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
  <li>h</li>
</ul>

如何保持第一个代码段的行为，但要从上到下而不是从左到右进行排序？

Answer 1

我认为做到这一点的唯一方法是考虑JS并动态调整行数。

这是一个简化的示例，如果您有间隙，填充等，则需要更完整的代码

var minv = 200; 
var grid = document.querySelector('.grid');
var nb   = document.querySelectorAll('.grid li').length;

var nb_row = Math.ceil(nb/Math.floor(grid.offsetWidth/200));
/* grid.offsetWidth/200 = X will give the number of columns
   nb/X will give the number of rows
   
   We use floor with the first as we won't have overflow but a wrap (so 3.2 should be 3)
   We use ceil with the second one as we may have the last row with fewer elements (so 3.2 should be 4)

*/

grid.style.gridTemplateRows="repeat("+nb_row+",auto)";

window.addEventListener('resize', function(event){
   nb_row = Math.ceil(nb/Math.floor(grid.offsetWidth/200));
   grid.style.gridTemplateRows="repeat("+nb_row+",auto)";
});

.grid {
  display: grid;
  grid-auto-columns: minmax(200px, 1fr);
  grid-auto-flow: column;
  list-style: none;
  padding:0;
}

<ul class="grid">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
  <li>h</li>
</ul>

Answer 2

您可以使用grid-template-rows限制行数，以便网格可以计算每一列的项目。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: repeat(3, 100px);
  grid-auto-flow: column;
  list-style: none;
}

<ul class="grid">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
  <li>h</li>
</ul>

我可以从上到下对网格项目进行排序，同时仍然包装到下一列吗？

2 个答案: