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

Question

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

I can change the layout depending on the number of items as shown below, but the order in which the items are placed when there are more than 9 items is from top to bottom. Is there any way to solve this problem?

    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)',
    }
}

This is the current sort order. I want to change the order as per the requirement.

Answer 1

using nth-child can help to do this using only 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

From the description, assuming that you do not want to have more than four rows when where are 9 or more items and want columns to be automatically created then, you need to do little bit of number manipulation.

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)',
  }
}

By removing auto-fill and specifying explicit columns, the grid would placement column-wise and move to next row after each column in the previous row is filled.

Updates: Additionally, you need to add property grid-auto-flow: column; to the styles object when length is more than 9. The default value is row means, it would try to fill all the columns of first row and then move to next row. With value of column , it would change the flow and fill column first and then move to next column.

Read more aboutgrid-auto-flow here.