

グリッドレイアウトで以下の要件を満たす実装をしてたいのですがやり方がわからないので質問させてください。

[![画像の説明をここに入力](https://i.stack.imgur.com/rzZ2r.png)](https://i.stack.imgur.com/rzZ2r.png)

下記のようにアイテム数によってレイアウトの変更は実現できるのですが、９個以上の場合のアイテムの配置順が上から下になってしまいます。それを解決する方法は何かありますでしょうか？

[code]

    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)',
        }
    }
    
[/code]


CC BY-SA 4.0
2021-04-28T03:22:53.317
75547
2021-04-28T09:26:44.940
45030
question
javascript css vue.js
CSS グリッドレイアウトの並び順について


`grid-auto-flow` プロパティを指定しているからではないでしょうか？画像の動作に合うように大雑把に修正すると、次のようになると思います。

[code]

    function* range(a, b) {
      for (let i = a; i <= b; i++) {
        yield i;
      }
    }
    
    function getKeysStyle(items) {
      if (items.length >= 19) {
        return {
          marginTop: '8px',
          display: 'grid',
          gridGap: '6px',
          gridTemplateColumns: 'repeat(5, minmax(40px,1fr))',
        };
      } else if (items.length >= 9) {
        return {
          marginTop: '8px',
          display: 'grid',
          gridGap: '6px',
          gridTemplateColumns: 'repeat(3, minmax(40px,1fr))',
        };
      }
      return {
        marginTop: '8px',
        display: 'grid',
        gridGap: '6px',
        gridTemplateColumns: 'repeat(2, 1fr)',
      }
    }
    
    
    const elmNum = 9;
    [...range(1, elmNum)].forEach(e => {
      const div = document.createElement("div");
      const divTxt = document.createTextNode(e);
      div.appendChild(divTxt);
      document.body.appendChild(div);
    });
    
    const divs = [...document.querySelectorAll("body > div")];
    const properties = Object.entries(getKeysStyle(divs));
    for ([property, value] of properties) {
      document.body.style[property] = value;
    }
[/code]


CC BY-SA 4.0
2021-04-28T09:26:44.940
75557
2021-04-28T09:26:44.940
32986
75547
answer