I’m struggling to think of a nice way to setup my grid items in an HTML page. I have a number of charts, each with a previous and current version. Sometimes they have different heights so I decided to have two columns and as many rows as needed, with the Previous charts on the left and 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 I have a narrow screen, I want all the charts in one column, with all the current charts before all the previous charts. I tried some CSS grid but it doesn’t move the charts to the front or the back. I tried using grid-template-areas
but then all the charts overlapped.
Here’s a codepen of what I have
If you made the view narrow, the blocks should reorder so all the current orange blocks are on the top, followed by all the previous blocks, with their original order respected.
Here’s an image of the desired wide view (this works right now)
Narrow:
How can I make this work with CSS grid, or with some other simple css? I don’t mind rearranging the items in HTML, so long as they are ordered correctly on the display.
3
Answers
Just use
grid-auto-flow: column
to put your items in their respective columns, then when the width is small enough put them all in one column and tell the "previous" items to come last usingorder
.https://codepen.io/Paulie-D/pen/oNRqBpN?editors=1100
Use CSS Order Property
This order property will order your charts just add these into your code
This will order the current as first and previous as second according to the reference images that you provided.
For more understanding of this CSS Order Property
Since you mentioned that rearranging the HTML wasn’t an issue, I feel like this is more of a flexbox scenario, though Paulie_D already has you covered for making it work with grid. Seems to make more sense at a glance to have all the like elements together in the HTML structure.
Put all current elements in one div, all previous elements in another div. Both are flexboxes in column mode.
Then put a wrapper around these two columns. Also a flexbox, but horizontal for desktop and vertical for mobile.
flex-direction
on the wrapper is the only thing that needs to change between the two views =)(And as a side benefit, you don’t need to specify the "previous" or "current" class on every item as they can be targeted via their parent instead, i.e.
.row-current > .item
instead of.item.current
.)