Shifting columns in CSS Grid as the screen size changes

Question

Shifting columns in CSS Grid as the screen size changes

I'm having trouble figuring out the best way to organize my grid items on an HTML page. I have several charts, each with a previous and current version. Sometimes the heights of these charts vary, so I decided to create a layout with two columns and multiple rows. The Previous charts will be on the left and the Current charts on the right:

<div class="my-grid">
  <div class="chart previous">Previous</div>
  <div class="chart current">Current</div>
  <div class="chart previous">Previous</div>
  <div class="chart current">Current</div>
</div>

However, when the screen becomes narrow, I want all the charts to display in a single column, with the Current charts appearing before the Previous ones. I've attempted using CSS grid, but couldn't figure out how to move the charts to the front or back properly. Using grid-template-areas resulted in overlapping charts.

View the codepen example here

If you resize the view to be narrow, the blocks should rearrange so that all the orange Current blocks are at the top, followed by the blue Previous blocks, while maintaining their original order.

Below is an image depicting the desired wide view (which currently works as intended)

https://i.sstatic.net/yrnAL80wm.jpg

Narrow View:

https://i.sstatic.net/oTntvg3Am.jpg

What would be the best approach to achieve this layout using CSS grid, or any other simple CSS technique? I'm open to rearranging the items in the HTML, as long as they appear correctly in the display order.

html css css-grid

Answer 1

Answer №1

To organize your items into columns, simply use grid-auto-flow: column. When the width becomes too small, switch to a single column layout and adjust the order of items using order.

Check out this example on CodePen for reference.

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
}

.previous {
  grid-column: 1;
  background-color: green;
}

.current {
  grid-column: 2;
  background-color: orange;
}

.item {
  border: 1px solid black;
}

.tall {
  height: 100px;
}

@media (max-width: 600px) {
 .grid {
   grid-template-columns: 1fr;
 }

 .previous {
  grid-column: 1;
  order:1;
 }

 .current {
  grid-column: 1;
 }
}

<div class="grid">
  <div class="item previous">Previous</div>
  <div class="item current">Current</div>
  <div class="item previous tall">Previous</div>
  <div class="item current">Current</div>
  <div class="item previous">Previous</div>
  <div class="item current">Current</div>
  <div class="item previous">Previous</div>
  <div class="item current tall">Current</div>
</div>

Answer 2

To organize your items into columns, simply use grid-auto-flow: column. When the width becomes too small, switch to a single column layout and adjust the order of items using order.

Check out this example on CodePen for reference.

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
}

.previous {
  grid-column: 1;
  background-color: green;
}

.current {
  grid-column: 2;
  background-color: orange;
}

.item {
  border: 1px solid black;
}

.tall {
  height: 100px;
}

@media (max-width: 600px) {
 .grid {
   grid-template-columns: 1fr;
 }

 .previous {
  grid-column: 1;
  order:1;
 }

 .current {
  grid-column: 1;
 }
}

<div class="grid">
  <div class="item previous">Previous</div>
  <div class="item current">Current</div>
  <div class="item previous tall">Previous</div>
  <div class="item current">Current</div>
  <div class="item previous">Previous</div>
  <div class="item current">Current</div>
  <div class="item previous">Previous</div>
  <div class="item current tall">Current</div>
</div>

Answer 3

Answer №2

Implementing CSS Order Property for Chart Arrangement

By utilizing the order property in CSS, you can easily arrange your charts by including the following code snippets.


.previous {
    background-color: green;
    order:2;
}

.current {
    background-color: orange;
    order:1;
}

This configuration will prioritize displaying the current chart before the previous one, aligning with the provided visual references.

To delve deeper into the functionality of this CSS Order Property, refer to the detailed documentation available.

Answer 4

Implementing CSS Order Property for Chart Arrangement

By utilizing the order property in CSS, you can easily arrange your charts by including the following code snippets.


.previous {
    background-color: green;
    order:2;
}

.current {
    background-color: orange;
    order:1;
}

This configuration will prioritize displaying the current chart before the previous one, aligning with the provided visual references.

To delve deeper into the functionality of this CSS Order Property, refer to the detailed documentation available.

Answer 5

Answer №3

Considering the aspect of rearranging HTML is not a concern, utilizing flexbox seems to be the ideal solution for this scenario. Paulie_D has already provided insights on how to implement it with grid. It appears more organized to have similar elements grouped together in the HTML structure.

Place all current elements within one div and previous elements within another div. Both should operate as flexboxes in column mode.

Next, wrap these two columns with a wrapper element that serves as a flexbox, set to display horizontally for desktop and vertically for mobile. The only adjustment needed between the two views is the flex-direction property on the wrapper element =)

<html>
 <head>
  <style>
   .grid {
display: flex;
gap: 16px;
   }

   .row-current, .row-previous {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
   }

   @media (max-width: 600px) {
.grid {
    flex-direction: column;
}
   }

   .item {
border: 1px solid black;
   }

   .tall {
height: 100px;
   }

   .previous {
background-color: green;
   }

   .current {
background-color: orange;
   }
  </style>
 </head>
 <body>
  <div class="grid">
   <div class="row-current">
    <div class="item current">Current</div>
    <div class="item current">Current</div>
    <div class="item current">Current</div>
    <div class="item current tall">Current</div>
   </div>
   <div class="row-previous">
    <div class="item previous">Previous</div>
    <div class="item previous tall">Previous</div>
    <div class="item previous">Previous</div>
    <div class="item previous">Previous</div>
   </div>
  </div>
 </body>
</html>

(An added benefit is that you can target items based on their parent rather than assigning the "previous" or "current" class to each item individually, such as using .row-current > .item instead of .item.current.)

Answer 6

Considering the aspect of rearranging HTML is not a concern, utilizing flexbox seems to be the ideal solution for this scenario. Paulie_D has already provided insights on how to implement it with grid. It appears more organized to have similar elements grouped together in the HTML structure.

Place all current elements within one div and previous elements within another div. Both should operate as flexboxes in column mode.

Next, wrap these two columns with a wrapper element that serves as a flexbox, set to display horizontally for desktop and vertically for mobile. The only adjustment needed between the two views is the flex-direction property on the wrapper element =)

<html>
 <head>
  <style>
   .grid {
display: flex;
gap: 16px;
   }

   .row-current, .row-previous {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
   }

   @media (max-width: 600px) {
.grid {
    flex-direction: column;
}
   }

   .item {
border: 1px solid black;
   }

   .tall {
height: 100px;
   }

   .previous {
background-color: green;
   }

   .current {
background-color: orange;
   }
  </style>
 </head>
 <body>
  <div class="grid">
   <div class="row-current">
    <div class="item current">Current</div>
    <div class="item current">Current</div>
    <div class="item current">Current</div>
    <div class="item current tall">Current</div>
   </div>
   <div class="row-previous">
    <div class="item previous">Previous</div>
    <div class="item previous tall">Previous</div>
    <div class="item previous">Previous</div>
    <div class="item previous">Previous</div>
   </div>
  </div>
 </body>
</html>

(An added benefit is that you can target items based on their parent rather than assigning the "previous" or "current" class to each item individually, such as using .row-current > .item instead of .item.current.)

Shifting columns in CSS Grid as the screen size changes

Answer №1

Answer №2

Implementing CSS Order Property for Chart Arrangement

Answer №3

Similar questions

Transform @Html.PagedListPager from MVC into a structured list using Ul and LI elements

Top suggestions for maintaining the Firefox extension popup open when clicking the navigation button

Animating a div to continuously move back and forth in jQuery

The typography components within material-ui are appearing side by side on the same row

JavaScript - Dynamically loaded CSS: CSS variables are not immediately accessible to JavaScript, but are successfully evaluated within the CSS itself

Having trouble displaying the fancybox helper buttons

Maintaining the integrity of my flexible design as the screen resolution exceeds 960px

"Looking to add some flair to your website with a

Unable to save file as .css in Sublime Text

Switching back regular text from a superscript in document.execCommand

When the navbar collapses, it pushes non-collapsible elements aside to make room

Customizing existing Mui classes through the use of makeStyles

Enclose an image with a <div> element while maintaining the <div> height at

Arranging shapes of traffic lights in a stack

Creating Consistent Height and Alignment for Bootstrap 4 Cards

Easily manipulate textboxes by dynamically adding or deleting them and then sending the data to a

the new adjustment has not taken effect on index.php

Unable to submit form using the submit button

Automated scrolling effect within a container element

Troubleshooting the issue of the background of element A not changing when hovering over element B, despite mouseleave not