Can anyone point me in the direction of a solution for this responsive layout please.
I thought Grid would be my friend here and built the desktop layout using a 4-column grid but unless I’m using it wrong it’s not as elegant as I’d like.
I’d like to share the project, but at the moment it’s a mess! How do I reset all the breakpoint modifications to the default desktop one?!
Many thanks
Just use flex. Read about it in the University, it is super easy to setup and use.
OK, I’ll go down that route.
Just so I know, when would Grid be better then Flex, and vice versa?
To be honest it’s a personal preference. You can use grid for everything or never use it and still be ok. Depends on how comfortable you’re with this method. I personally rarely use grids which is ironic since once they were out I used them everywhere on my own portfolio. But then I almost never felt the need. But if you will train in using them without feeling weird (they are after all very different from your conservative css) you can use them easily in any circumstance.
Thanks for that. Grid seems more intuitive to me, but that’s because I’ve never learned this properly! Happy to learn the flex box way now.
I don’t suppose you can help with the second part of my question: resetting the breakpoint layout changes so it’s all default from the desktop?
https://dl.dropboxusercontent.com/s%2F9hg9m7oo102ewpf%2F0k4n9.jpg
I wrote 'div" but the elements can be what you want, you can do the yellow thing directly on the title element. It’s okay to nest elements a lot, but when you try not to, it’s better for accessibility, simpler for screen readers.
Then I really have to dive more into Grid, because I’m not at the intuitive stage yet :—D Especially about how things can/should wrap. Misteryyyyyy.
Grid and flexbox are very different. Grid has this magic advantage where you can make advanced layout without having to change anything on the DOM: it stays a list of equal elements. Flexbox is very easy, super straightforward once the DOM is composed to your likes, and more maintainable, I feel.
For example in this case if you follow my layout above, I think setting this up with flex takes less time and clicks than with grid. You should try to prove me wrong and record a screencast :—D
team fleeeeeeeeeeeeeex
You’ll have to manually alt-click on every modification on each breakpoint. No workaround here.
Wow. That is super helpful! Thank you so much!
