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.

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.

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

Guide on updating the state using a computed property in Vue.js

Create independent SVG files using Meteor and iron-router

TS1086: Attempting to declare an accessor within an ambient context is not allowed

using JQuery, add a class on click event or on page load

Unusual express middleware usage in NodeJS

How can I reset a CSS position sticky element using JavaScript?

Angular JS may encounter a cross domain problem when attempting to post on a third-party website

Instructions on how to create a horizontal scrolling div using the mouse scroll wheel

Enhancing the Appearance of Legends in Chartjs

Display/Modify HTML form

Deciphering HTML with the Eyes

Issue with uploading files in Internet Explorer using Ajax not resolved

Jquery is causing some issues with the code provided:

transform nested object into a flat object using JavaScript

What is the best way to incorporate CSS into this HTML document?

What is the accurate way to write the ID selector for the select-option-selected in JQuery?

Saving data in a CSV file on your local device using HTML5

Invoke the componentDidMount() method in a React Component that is not a subclass of React.Component

Clicking activates Semantic UI's dropdown function with the onClick method

Troubleshooting AngularJS: Diagnosing Issues with My Watch Functionality