Complex responsive layout
How should I structure this layout?
In the desktop version, there are 3 sections within the right sidebar, separated by equal gaps, but in the mobile version, there is just one grid.
15 Replies
hm, the different sections jump all over the place, in different orders.
you could try to do it with grid-template-areas.
give each section a grid-name
and position them with specific grid-template-areas for your specific media queries
Don't know how strict the desgns are, but:
- if the
hint and analyse could swap places in the mobile view
- and on desktop the < > buttons move to in between analyse and next,
it could be a bit easier order-wise.Appreciate your reply! Your approach is a great start, but I'm still unclear of how to implement the mix of large and small gaps in the desktop column
One approach that I can think of, which I'm sure is not optimal for accessibility, is to separate the layout into a flexbox with 3 sections, and selectively hiding elements when the layout shifts
btw, I designed the layout, and I am aware that it's chaotic lol, but I still want to keep things where they are
Im not able to look at it now (work) but can give it a try later today
thanks very much! no rush
a cool way to make this would be using linear-gradient xD
but ya looking at the image it seems like it's gonna be a chess board hence divs would be a better choice
I made a small example of what is possible. You still have to style the different sections ofcourse
https://codepen.io/MarkBoots/pen/poGrvGp
the layout changes from desktop to mobile < 600px
Woah! so cool!
- desktop view it is a 2 column grid
left column: board
right column: flex with 3 regions space between
- mobile view: 6 column grid with template-areas
the right container and regions are made display: content so we can assign all individual parts to that grid
thanks!
let me digest the code
no problem. take your time.
so the children can follow the parent grid layout even if they are nested several layers deep?
wow I had no clue
i have never even seen display:contents
amazing
yea, by using display:contents, the container is omitted
there is also subgrid that can do this, but it's not stable enough imo
Thank you so much!
you're welcome. make sure you fork or copy the pen if you want to keep it for future reference. I might delete it later
Forked!