What could be causing certain grid items to display in a disorderly manner?

Currently, I am working on a CSS grid layout that resembles the one showcased in this demo. The challenge I'm facing is related to the ordering of items within the grid. Specifically, every 6th and 7th item seem to be out of order and I would like them to swap positions while keeping the overall layout intact (e.g., items 6 and 7).

Is there a way to achieve this reordering effect using just CSS?

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 8px;
}

.item {
  background-color: #c4c4c4;
  display: flex;
  justify-content: center;
  align-items: center;
}

div:nth-child(8n+1),
div:nth-child(8n+3), 
div:nth-child(8n+7),
div:nth-child(8n+8) {
  grid-row: span 1;
}

div:nth-child(8n+2), 
div:nth-child(8n+4),
div:nth-child(8n+5), 
div:nth-child(8n+6) {
  grid-row: span 2;
}
<div class="wrapper">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
  <div class="item">item7</div>
  <div class="item">item8</div>
  <div class="item">item9</div>
  <div class="item">item10</div>
  <div class="item">item11</div>
  <div class="item">item12</div>
  <div class="item">item13</div>
  <div class="item">item14</div>
  <div class="item">item15</div>
  <div class="item">item16</div>
</div>

htmlcsslayoutcss-selectorscss-grid

Answer №1

To begin with, adjust your selectors so that the 7th element spans, not the 6th one.

By doing this, you will shift the 6th element to the right, aligning it with the flow of the grid and the position of the previous element, which is the 5th.

We can also explicitly set the position for every 6th element as we know they are located in the second column.

This adjustment will ensure that the 7th and 8th elements follow the 6th, and you can achieve this by using grid-auto-flow:row dense;

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-auto-flow: row dense;
  grid-gap: 8px;
}

.item {
  background-color: #c4c4c4;
  display: flex;
  justify-content: center;
  align-items: center;
}

div:nth-child(8n+1),
div:nth-child(8n+3),
div:nth-child(8n+6),
div:nth-child(8n+8) {
  grid-row: span 1;
}

div:nth-child(8n+2),
div:nth-child(8n+4),
div:nth-child(8n+5),
div:nth-child(8n+7) {
  grid-row: span 2;
}

div:nth-child(8n+6) {
  grid-column: 2;
}
<div class="wrapper">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
  <div class="item">item7</div>
  <div class="item">item8</div>
  <div class="item">item9</div>
  <div class="item">item10</div>
  <div class="item">item11</div>
  <div class="item">item12</div>
  <div class="item">item13</div>
  <div class="item">item14</div>
  <div class="item">item15</div>
  <div class="item">item16</div>
</div>

Answer №2

Despite the apparent disarray of every 6th and 7th item, they are actually in order.

Take a look at item 5 (a span 2 item). Its top half is on row 2 while the bottom half is on row 3, yet it is placed on row 2.

The same applies to item 6, where its top and bottom halves are split between rows 2 and 3 but are still placed on row 2. This positions 6 before 7, creating an ordered sequence despite initial perceptions.

https://i.sstatic.net/2AwkW.png

Applying CSS to target these items is not complex:

div:nth-child(8n+6),
div:nth-child(8n+7) {}


.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 8px;

}

.item {
  background-color: #c4c4c4;
  display: flex;
  justify-content: center;
  align-items: center;
}

div:nth-child(8n+1), div:nth-child(8n+3), div:nth-child(8n+7), div:nth-child(8n+8) {
  grid-row: span 1;
}

div:nth-child(8n+2), div:nth-child(8n+4), div:nth-child(8n+5), div:nth-child(8n+6) {
  grid-row: span 2;
}

div:nth-child(8n+6),
div:nth-child(8n+7) {
    background-color: lightgreen;
}
<div class="wrapper">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
  <div class="item">item7</div>
  <div class="item">item8</div>
  <div class="item">item9</div>
  <div class="item">item10</div>
  <div class="item">item11</div>
  <div class="item">item12</div>
  <div class="item">item13</div>
  <div class="item">item14</div>
  <div class="item">item15</div>
  <div class="item">item16</div>
</div>

Searching for further solutions to this issue may lead to promising results, like this one.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method for centering text input within an Angular Material toolbar?

Can anyone help me with aligning input elements with buttons on an Angular Material toolbar? Check out the code pen: http://codepen.io/curtwagner1984/pen/amgdXj Here is the HTML code: <md-toolbar class="md-hue-1" layout-align="start center" style="mi ...

htmlcssangularjsangular-material

Steps for altering the primary color in PrimeNG__Changing the primary color

What is the most effective way to modify the default primary color for primeNG (saga-blue theme)? Altering --primary-color does not have the desired effect, as elements in node_modules/..../theme.css are styled using the main color hex rather than '-- ...

cssangularprimeng

Top-rated program for creating user guides using HTML code

I am currently working on a project that involves creating end-user documentation for a software application. However, the software will be retired next year, so I do not want to spend too much time on producing a professional-grade manual. The documentati ...

phphtmlmultimediaend-useruser-manual

React forms are experiencing issues with characters overlapping

Having trouble with overlapping label and input letters in my React form. Looking for: The appearance shown in the top image Experiencing: What is displayed in the bottom image Any solutions on how to resolve this issue? https://i.sstatic.net/Y3W2m.png ...

cssreactjs

I possess a solitary div element that requires dynamic replication

I have a single container and an unspecified number of rows of data. I want to display this data on HTML cards that are generated dynamically based on the number of rows. For example, if there are 10 rows of data, I need to create 10 card elements with ea ...

javascriptphphtmlcssdisplay

using jquery to fill in fields in a table form

I am currently working with a basic html table that initially has two rows, each containing 2 form fields. Users have the ability to add more rows to the table by following this process: $('a#addRow').click(function() { $('#jTable tr:la ...

phpjavascriptjqueryhtmlforms

Creating a webpage that dynamically loads both content and video using HTML and Javascript

I designed a loading page for my website, but I could use some assistance. The loading page remains visible until the entire HTML content is loaded and then it fades out. However, I am facing an issue because I have a background video that I want to load ...

javascriptjqueryhtmlcssvideo

Ways to incorporate encoded HTML text into string literals

When attempting to insert a HTML encoded special character within a string literal, I am encountering an issue where it does not display as intended in the final document. The approach I am taking is as follows: const head = { title: `${ApplicationName} ...

javascripthtmlencoding

Instructions on placing the bottom of an inline-block element flush with the bottom of a block element

In the scenario where I have the following HTML and CSS code: .something{ width: 200px; } .display-block { display: block; } .req-field{ float: right; font-size: 5px; } <div class="something"> <span class="display-block">First name ...

htmlcss

The issue I am facing currently revolves around the absence of images on

I recently uploaded a captivating HTML page for my website's captive portal. Although the redirection to the designated page is working perfectly, I am facing an issue with the images included in the HTML page. Even though I went ahead and uploaded th ...

htmlpfsensecaptiveportal

Discovering the mean value from a data set in a spreadsheet

I have been tasked with creating an HTML page for a car dealership using JQuery and Bootstrap 5. The goal is to utilize Bootstrap 5 to accomplish the following: Set up a table with appropriate form input elements that allow users to input four (4) quarter ...

javascripthtmljqueryaveragebootstrap-5

Tips for increasing the height of a div as rows are dynamically added to a table

I am facing an issue with a div main containing a table grid. Rows are dynamically added to the table, causing it to increase in height. However, the height of the div main remains unchanged, resulting in the table overlapping the footer content. What chan ...

htmlcss

Enhance the appearance of a custom checkbox component in Angular

I developed a customized toggle switch for my application and integrated it into various sections. Recently, I decided to rework it as a component. However, I am encountering an issue where the toggle switch button does not update in the view (it remains t ...

cssangulartypescripttoggle

What is the best way to verify reCAPTCHA v2 on an HTML website?

The code I'm using is giving me an error when the page loads: Cannot connect to reCAPTCHA. Please check your connection and try again. Just a reminder, I won't be incorporating any server-side code on my website. It's a simple HTML setup ...

jqueryhtmlrecaptcha

Exploring Angular 6: Unveiling the Secrets of Angular Specific Attributes

When working with a component, I have included the angular i18n attribute like so: <app-text i18n="meaning|description"> DeveloperText </app-text> I am trying to retrieve this property. I attempted using ElementRef to access nativeElement, bu ...

javascripthtmlangulartypescript

Error: The argument passed to int() must be a string, bytes-like object, or number, not 'NoneType' (Issue when sending HTML input to Python)

#!C:\Users\aan\AppData\Local\Programs\Python\Python39\python.exe import numpy as np import skfuzzy as fuzz import cgi from skfuzzy import control as ctrl print("Content-type:text/html\r\n\r\n ...

pythonhtml

Switch images when hovering

I currently have two dropdown menus called NEW and SHOP. When I hover over the New Menu 1, it should display the corresponding image. Similarly, when hovering over New Menu 2, the related image should be shown in a div with the ".menu-viewer" class. Whil ...

jquerycss

How to ensure text wraps when resizing window in CSS? The importance of responsive design

UPDATE: I finally fixed my scaling issues by setting the max-width to 760px. Thank you for the tip! However, a new problem has emerged - now my navigation scales in the small window and I want it to remain a fixed size. Hello everyone! I am currently lear ...

htmlcssresponsive-designcpu-wordword-wrap

Problem with Bootstrap container-fluid overlapping with floated element

I am struggling with the layout of my card body, which includes a floating logo and rows enclosed in a container-fluid. While everything looks great in Chrome, I am facing alignment issues in Edge and Firefox. I have considered using absolute positioning ...

cssfirefoxbootstrap-4microsoft-edge

Tips on using JQuery to extract form field information from a drop-down menu, display it in a div, and then compare it with the subsequently

In my HTML file, I am using two dropdown lists and JQuery for validation. First, I need to save the selected items from both dropdown lists in a variable and then compare them with the next selection. If the data from both dropdown lists match, an alert m ...

javascriptjqueryhtmlajaxjson