Manage the number of items in each column using flexbox or grid layout strategy

Here's a similar situation

.items {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  background: #cecece;

  padding: 10px;
  margin: 20px;
}

.item {
  height: 100%;
  flex: 0 0 calc(50% - 8px);
  margin: 4px;
  background: #16B6B6FF;
}
<div class="items">
  <div class="item" style="order: 1">1</div>
  <div class="item" style="order: 3">2</div>
  <div class="item" style="order: 5">3</div>
  <div class="item" style="order: 2">4</div>
  <div class="item" style="order: 4">5</div>
  <div class="item" style="order: 6">6</div>
  <div class="item" style="order: 99">7</div>
  <div class="item" style="order: 98">8</div>
</div>

Is there an approach to rearrange 8 after 7 while maintaining the two-column layout without altering the HTML structure?

Desired result:

1     4
2     5
3     6
      7
      8
cssflexboxgrid

Answer №1

I have discovered the solution. In summary, I opted to utilize CSS Grid Layout

.items {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  background: #cecece;
  gap: 10px;
  padding: 10px;
  margin: 20px;
}

.item {
  background: #16B6B6FF;
}

.item:nth-child(n + 4) {
  grid-column: 2;
}
<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

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

Ensure that the child element completely fills the parent element while maintaining a padding around the edges

How can I create a child div that fills 100% of the parent's width and height, including padding? I've tried using box-sizing = border-box, but it isn't working. I also attempted adding the box-sizing property to all elements with *, but tha ...

htmlcss

Older versions of Internet Explorer, specifically IE 8 and below, are causing issues with iframe

I am currently working on a website that includes an embedded Vimeo video. The majority of our target audience uses IE8 or older, and interestingly enough, most of them have their browsers zoomed to 125% view. Unfortunately, while everything else on the si ...

cssinternet-exploreriframezooming

Adding a unique styling to a div with a custom css class

I am experiencing an issue with my CSS file (approval.css) that is defined as a resource and applied to my XPage. Within the css, there is a specific line of code: .appNavBackground {background-color:#ffffd6 ;} When I try to apply this styleClass to a di ...

htmlcssxpages

Unable to change background image using jQuery

Snippet: const imageUrl = 'img/star.png'; $("#venueId-"+nodeId).css('background','url("'+imageUrl+'") no-repeat top right'); This piece of code is the start of a function that triggers upon clicking. The goal is to ...

jquerycss

Transformation of looks post a refresh

Initially, the CSS and appearance of the page look fine when I first open it (after clearing the cache). However, upon refreshing the page, a part of it changes (specifically, the padding direction of a div). This change occurs consistently with each refre ...

javascriptcssgoogle-chromeweb-applicationspage-refresh

Email header image alignment issue in Thunderbird

I recently created an HTML email using a template and it looks great on most platforms, but not in Thunderbird. The header image is not aligned properly above the content as shown in the screenshot. Does anyone know how to troubleshoot this issue or have a ...

htmlcsshtml-emailstylingthunderbird

What is the best way to ensure one div expands to full width while simultaneously hiding another div on the page?

Hey there, I'm looking for a way to expand the width of a clicked div while making the other div disappear from the screen simultaneously. It should also be toggleable, so clicking the button again will shrink the div and bring back the other one. For ...

javascriptjqueryhtmlcss

I want to create a custom jQuery slider totally from scratch

Greetings everyone, I have been tasked with creating a slider using only HTML / jQuery code. Here is the template: And here is the HTML code for the template above: <div id="viewport-container"> <section id="sliding-container"> & ...

javascriptjqueryhtmlcssslider

Scroll to the end of the main div's horizontal position instead of using offset().left

I'm struggling with an issue in my code. <script type="text/javascript"> $(function() { $('ul.nav a').bind('click',function(event){ var $anchor = $(this); /* ...

javascriptjqueryhtmlcssoffset

Unable to transfer all the formatting from the original file for the window.print() function. Localhost is functioning properly, but encountering issues with production

I'm encountering an issue with getting all styles from my Vue app. I have tried the code provided in this answer: https://stackoverflow.com/questions/52343006/how-to-print-a-part-of-a-vue-component-without-losing-the-style While it works fine on loc ...

javascriptcssvue.jsvuejs2vuetify.js

What are some methods for identifying a single attribute element that is duplicated elsewhere on a webpage?

<html> <tr id="userman-orgchart-tree-node-9" class="fancytree-expanded fancytree-folder fancytree-has-children fancytree-exp-e fancytree-ico-ef"> <td> <span class="fancytree-node" style="padding-left: 16px;"> <span class="fancytr ...

htmlcssxpathselenium-webdriverselenium-ide

What is the best way to ensure the header expands to fill the entire width when zooming out?

When I try to zoom out, the header does not extend to the full width of the page. I have included two images for reference - the first image shows how it should look when zooming out, while the second one depicts the issue where the header does not occupy ...

htmlcsszooming

Capturing the action phase in Liferay to change the cursor to 'waiting' mode

I'm currently working on a large Liferay project and have encountered a specific issue: Whenever something in the system is loading or processing, I need to change the cursor to a waiting GIF. While this is simple when using Ajax, there are many inst ...

javajavascriptjquerycssliferay

The CSS3 :nth-child(odd) Selector is not working for either columns or rows in the selection

I am facing an issue with a table where I have used tr:nth-child(odd) to alternate row background colors. HTML /*-----------#602 SAO Styles-----------------------------*/ /*---------SAO Global------------*/ .sao-pricing-table table { border-collaps ...

htmlcss

The viewport width in NextJS does not extend across the entire screen on mobile devices

I'm currently tackling a challenge with my NextJS Website project. It's the first time this issue has arisen for me. Typically, I set the body width to 100% or 100vw and everything works smoothly. However, upon switching to a mobile device, I not ...

javascripthtmlcsstypescriptnext.js

Arrange a div element within another div by utilizing the fixed positioning property, while also accounting for any potential "white space

Can someone help me figure this out: I currently have this much progress: http://jsbin.com/apikiw/3/edit#preview The issue I'm facing is that I am unable to insert it between the <p /> tags due to its dynamic nature... any solutions or suggest ...

javascriptjqueryhtmlcss

Positioning elements in CSS using percentages allows for flexible and responsive

I am new to web design and I am trying to create a webpage similar to the one shown in this image. However, I want to set the height and width of the divs using percentage values instead of pixels. Whenever I attempt this, the boxes end up overlapping or ...

htmlcsscss-position

What is the significance of z-index in relation to relative and absolute positioning?

Is there an issue with z-index when working with a div that has absolute position relative to another div? I am trying to place the absolute div below the other one, but it always appears on top. How can I resolve this problem? ...

css

Customize the background color of selected date in MUI DatePicker 6.19.7 with sx styling

Looking to update the color of a specific element highlighted by an arrow using sx{} DatePicker <LocalizationProvider dateAdapter={AdapterDayjs}> <DatePicker className={styles.picker} ...

cssreactjsmaterial-uidatepickercalendar

How about this: "Designing a Pop-Up Window

Currently working on my own customized modal, here's the unique CSS I came up with: .custom-modal{ position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; filter:alpha(o ...

htmlcssless