如何更改 CSS 网格布局的顺序

Question

我想实现一个满足以下要求的网格布局，但我不知道怎么做，所以请告诉我。

我可以根据项目的数量更改布局，如下所示，但是当项目超过 9 个时，项目的放置顺序是从上到下。 有没有办法解决这个问题？

    private getKeysStyle(items: string) {
    if(items.length >= 9){
        return {
            marginTop: '8px',
            display: 'grid',
            gridGap: '6px',
            gridAutoFlow: 'column',
            gridTemplateColumns: 'repeat(auto-fill, minmax(40px,1fr))',
            gridTemplateRows: 'repeat(4, 1fr)',
        };
    }
    return {
        marginTop: '8px',
        display: 'grid',
        gridGap: '6px',
        gridTemplateColumns: 'repeat(2, 1fr)',
    }
}

这是当前的排序顺序。 我想根据要求更改订单。

Answer 1

使用nth-child可以帮助仅使用 CSS 做到这一点：

 .container { display:inline-grid; counter-reset:num; grid-template-columns:50px 50px; grid-auto-columns:50px; margin:5px; } /* create another column after 9 elements */.container >:nth-last-child(9) ~:nth-child(3), .container >:nth-last-child(11) ~:nth-child(3){ grid-column:3; } /* create another column after 12 elements */.container >:nth-last-child(13) ~:nth-child(4), .container >:nth-last-child(16) ~:nth-child(4){ grid-column:4; } /* create another column after 16 elements */.container >:nth-last-child(17) ~:nth-child(5), .container >:nth-last-child(21) ~:nth-child(5), .container >:nth-last-child(25) ~:nth-child(5){ grid-column:5; }.container div { padding:10px; outline:1px solid; }.container div::before { content:counter(num); counter-increment:num; }

 <div class="container"> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </div> <div class="container"> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </div> <div class="container"> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </div> <div class="container"> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </div> <div class="container"> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </div> <div class="container"> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </div> <div class="container"> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </div> <div class="container"> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </div> <div class="container"> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </div> <div class="container"> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </div> <div class="container"> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </div>

Answer 2

从描述中，假设您不想在 9 或更多项目时拥有超过四行并希望自动创建列，您需要做一点数字操作。

private getKeysStyle(items: string) {
  if (items.length >= 9) {
    // This will determine how many columns you need to keep rows restricted to 4.
    const columnCount = Math.ceil(items.length / 4);

    return {
        marginTop: '8px',
        display: 'grid',
        gridGap: '6px',
        gridAutoFlow: 'column',
        gridTemplateColumns: `repeat(${columnCount}, minmax(40px, 1fr))`,
        gridTemplateRows: 'repeat(4, 1fr)',
    };
  }

  return {
    marginTop: '8px',
    display: 'grid',
    gridGap: '6px',
    gridTemplateColumns: 'repeat(2, 1fr)',
  }
}

通过删除auto-fill并指定显式列，网格将按列放置并在前一行中的每一列被填充后移动到下一行。

更新：此外，您需要添加属性grid-auto-flow: column; 到 styles object 当长度大于 9 时。默认值为 row 表示，它会尝试填充第一行的所有列，然后移动到下一行。 使用column的值，它将首先更改流量和填充列，然后移动到下一列。

在此处阅读有关grid-auto-flow更多信息。