This is an interesting read about using CSS Grid to build traditional sidebar layouts with full width elements. There is also a simple idea to add a max width setting for full width images so that you don’t need to use large heavy images to cater for huge widths.
2 Likes
Yeah - CSS grid does offer a great array of ways to lay things out.
The example on that page though could obviously be easily done with different containers (using a mix of constrained width and full–width ones). Doing it in a single grid is nice though - and definitely a bit lighter on code.
Need to be careful with the ch unit though as it is a fixed width unit and therefore the 1fr 65ch 1fr that he uses will not be any use on small devices (less than 65ch wide).
For anyone interested, here is the same example in Source (1 page doing it with the stack settings and another using custom CSS to place the items)
https://shakingthehabitual.com/downloads/grid-full-bleed.rw8.zip
1 Like
I’m still lost when it comes to css grids. I see Grid Plus and break out in a cold sweat. I did once almost get my head around it, but soon forgot it all… FR. Ch. WTF!!! ;-)
Is there a guide anywhere as to what on earth is going on with css grids?
I pulled a page together on my Knowledge Base with a few bits and bobs:
https://knowledge.shakingthehabitual.com/article/74-learn-css-grid
Excellent, will give that a read.
You really must lean the basics of CSS Grid. It is so powerful yet simple and quick to use once you grasp the basics.