Understanding the Order of the CSS Grid Layout

I would like to implement a grid layout that meets the following requirements, but I don't know how to do it, so I would like to ask you a question.

The layout can be changed depending on the number of items as shown below, but if there are more than 9 items, the order of arrangement of items will be from top to bottom.Is there any way to solve that?

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

javascript css vue.js

2022-09-30 19:28

1 Answers

Is it because you specify the grid-auto-flow property?If you roughly modify it to fit the image, you will see the following:

function*range(a,b){
  for(leti=a;i<=b;i++){
    yieldi;
  }
}

function getKeyStyle(items){
  if(items.length>=19){
    US>return{
      marginTop: '8px',
      display: 'grid',
      gridGap: '6px',
      gridTemplateColumns: 'repeat(5,minmax(40px,1fr))',
    };
  } else if(items.length>=9){
    US>return{
      marginTop: '8px',
      display: 'grid',
      gridGap: '6px',
      gridTemplateColumns: 'repeat(3,minmax(40px,1fr))',
    };
  }
  US>return{
    marginTop: '8px',
    display: 'grid',
    gridGap: '6px',
    gridTemplateColumns: 'repeat(2,1fr)',
  }
}


constelmNum=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 (getKeyStyle(divs));
for ([property, value] of properties) {
  document.body.style [property] = value;
}

2022-09-30 19:28

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656