How do I go to reverse the order of GRID Items?
Codepen to provide context: https://codepen.io/NotNegative/pen/bNVKzmY
I just completed the Absolute Beginner Course yesterday and have been experimenting with what I learned. I’m also exploring things closely related to the course to take it step by step. I’m not even sure if what I’m trying to do makes sense in terms of practice, so please let me know if it doesn’t.
I’m looking for a way to reverse the order of items in every second section (like the 2nd, 4th, 6th) and so on.
I found a solution using FLEX, but I’d prefer to stick with GRID since I believe it works better with the design I have in mind.
Does GRID offer a comfortable way to do that?
16 Replies
I want to achieve this result, which I can easily do by rearranging the elements in the HTML. However, on mobile, I’d like the image to appear first, so I need a way to reverse the order of the items with a media query.
you can try
order property or grid-column on the childrenside note: you should really remove teh positioning on figure > img
Personally I would use grid-template-areas, or at the least you can just tell your figure to be
grid-area: 1; for the reversed classYou mean just use classes to achieve the same results, or totally avoid using position in this case?
If the first, I just did not placed all classes yet cause I am just trying to achieve this result first
I placed the position because I wanted to make the Image height adapt to the text (so if text takes 300px in height, image will be 300px, etc), and that's the only way I found it working
Is there a better way to achieve that?
I'll rapidly test this
na I mean if it works thats fine ig, just know you are pulling it from the flow
seems to work fine with my solution above so
If it's a grid item, I think you could give it a
width: 100% and height: 100% and they'll match the cell 🤔ya I thought so too but its not my brains not working atm so (and with grid it should fill by default so ... brain not braining though)
but if it's in a grid, the positioning of it will be within it's cell, so not sure if you'd need to change anything.
Uhm, the goal was having the image take the same exact height of the text, but with everything I tried it was the opposite (text taking as much space as the image)
I definitely need to make some more research on it, cause I am sure there must be a better way
ngl I always struggle with object-fit to this day 🤣 (maybe this position trick is what I need, and I'm wrong)
Oh... I think this would work. just covered it in a video about a month ago 😄 (it's a bit advanced for having just finished that course, but it's a simple enough solution) - https://youtu.be/cS05Sd77sBE
Kevin Powell
YouTube
How to ignore an element’s size (and why you’d want to)
✅ Jeff’s article that contains codepen’s of all the solutions: https://jeffbridgforth.com/having-figure-match-width-of-contained-image/
✅ Other CSS tips:
✅ Free and Premium courses: https://kevinpowell.co/courses
✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in ...
Bit of a different setup, but I think it'll work for this usecase as well
Yeah, your solution worked great.
I was thinking to add a media query, like this:
Cause I want the 2nd, 4th, etc section to be image left-text right only on larger screen, while on mobile it should remain normal grid order.
I need to figure out what my default design it, but I strongly believe (which can be wrong) is more comfortable to convert into a desktop rather than the opposite
Anyway, I am having a looot of fun building something I like and researching
That's amazing, thanks a lot!