Steps for rearranging the order of CSS grid layout

Question

Steps for rearranging the order of CSS grid layout

Could you assist me in implementing a grid layout that fulfills these specific criteria? I'm unsure of how to proceed, so any guidance would be greatly appreciated.

https://i.sstatic.net/vBtXc.png

When there are more than 9 items, the current layout changes the order from top to bottom. Is there a solution to maintain the desired item placement?

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

The current sorting order is not meeting the requirement. I need to adjust the order accordingly.

https://i.sstatic.net/537EI.png

javascript html css vue.js

Answer 1

Answer №1

To achieve this effect using only CSS, one can utilize the nth-child selector:

.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 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 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 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>

Answer 2

To achieve this effect using only CSS, one can utilize the nth-child selector:

.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 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 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 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>

Answer 3

Answer №2

Based on the given description, if you want to limit the number of rows to four when there are nine or more items and have columns generated automatically, a bit of numeric manipulation is required.

private getKeysStyle(items: string) {
  if (items.length >= 9) {
    // Calculate the number of columns needed while keeping 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)',
  }
}

To make the grid place items column-wise and move to the next row after each column in the previous row is filled, remove auto-fill and specify explicit columns.

Updates: When the length exceeds 9, remember to include the property grid-auto-flow: column; in the styles object. By default, it operates row-wise, filling up all columns in one row before moving to the next. Setting it to column changes this behavior to fill columns first before advancing to the next.

Explore more about grid-auto-flow here.

Answer 4

Based on the given description, if you want to limit the number of rows to four when there are nine or more items and have columns generated automatically, a bit of numeric manipulation is required.

private getKeysStyle(items: string) {
  if (items.length >= 9) {
    // Calculate the number of columns needed while keeping 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)',
  }
}

To make the grid place items column-wise and move to the next row after each column in the previous row is filled, remove auto-fill and specify explicit columns.

Updates: When the length exceeds 9, remember to include the property grid-auto-flow: column; in the styles object. By default, it operates row-wise, filling up all columns in one row before moving to the next. Setting it to column changes this behavior to fill columns first before advancing to the next.

Explore more about grid-auto-flow here.

Steps for rearranging the order of CSS grid layout

Answer №1

Answer №2

Similar questions

Using NGRX Effects to Load Data for a Specific Item in Angular

`There are two text boxes in a blog post editor within tinyMCE`

The AJAX success function is operational, yet the file does not execute

Verify if the value in a textbox exceeds the number entered in an array of textboxes

Designing a responsive two-column table layout

Unusual actions observed in ajax rails form calculator with pre-filled values

substituting the deep watcher in Angular

Initialization of Masonry JS occurs prior to images being fully loaded

What is the best way to modify the selection text background with CSS?

Dividing the code into a function and invoking it does not produce the desired outcome

Using Grails to create remote functions with multiple parameters

Having difficulty utilizing the $.each() function to assign properties to an object

How can I locate specific images within a CSS sprite?

I prefer not to have the entire URL visible to me

Utilize a unique font exclusively for Internet Explorer

Struggling with the task of assigning a glTF item to a separate layer within Three.js

Generate random div elements and insert them dynamically into a fixed-sized container using AngularJS. The number of div elements created can range anywhere from 0 to

What is the method for placing one object within another object?

Is it possible to load a route first, and then proceed to load the static files from the public folder in a Node.js application?

What is the best way to automatically add a date and timestamp to every new entry?