Kevin Powell - Community•3mo ago

Best way of achieving layout with merging columns

so im designing this column layout with a large centre column and a side column but when it condenses on smaller screens I want to merge the columns and im not sure what the best way would be.

3 Replies

Alex•3mo ago

One approach would be to put everything in a container with display: grid, add a media query to set the number of columns and use a selector for all the elements you want to pop into a third column. E.g. if the lighter elements are asides,

#primary-container { 
Display: grid; 
Grid-template-columns: 3em 1fr; 
}

#primary-container :not(image) { grid-column: 2/3 }

@media (min-width: 1000px){
#primary-container { grid-template-columns: 3rem 80ch 1fr }
#primary-container aside { grid-column: 3/4}
}

#primary-container { 
Display: grid; 
Grid-template-columns: 3em 1fr; 
}

#primary-container :not(image) { grid-column: 2/3 }

@media (min-width: 1000px){
#primary-container { grid-template-columns: 3rem 80ch 1fr }
#primary-container aside { grid-column: 3/4}
}

However, think carefully about how you mess about with the visual ordering of elements vs the actual order in the DOM; how is that going to affect the reading/navigation experience for those using screen readers or keyboard navigation? The sub-column on the condensed version could be done by putting all the beige boxes in a containing div and setting that to grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr))

Chris Bolson•3mo ago

As with most things, there are many ways that you can achieve this sort of thing, and probably any of them will have their own caveats. I suspect that it could be done with a clever use of subgrid and container queries but then you may have browser support issues. Also, at least from your images, it appears that the content boxes don't line up so a main parent grid is probably not the best option 🤔 I would probably create a parent grid with the 2 columns that increases to 3 on larger screens. The right-hand column would be the third child of the parent wrapper and contain a single element which would itself be it's own grid with its child boxes. On smaller screens this would automatically flow before the second element which would be the main content (larger box). The problem now is that this last column would also need to stretch across all the rows (on larger screens). Unfortunately this is not easy with grid if we don't know the number of rows. In an ideal world grid-row: 1 / -1 would do the trick but I don't think that this is possible at the moment ( would love to be proved wrong). So, unless we use JS, this row span needs to be hard-coded according to the number of rows which obviously is not ideal. I have thrown together a quick demo which, whilst might not be exactly what you are looking for, it might give you some ideas and help you on your way. https://codepen.io/cbolson/pen/NWZOBZg

DragonogsOP•3mo ago

thanks for the help guys definitely better than anything i could come up with

Gaming

Programming

Best way of achieving layout with merging columns