Sidebar layout with intrinsic collapsing grid, CSS-only
I'm trying to make an intrinsic and responsive sidebar design. All the no-media query responsive tutorials that I could find (eg. https://css-tricks.com/responsive-layouts-fewer-media-queries/) have the grid columns the same width, but I'd like the first column to be narrower. Of course this can be done with flexbox (https://every-layout.dev/layouts/sidebar/), but only with 2 layout items??? In the collapsed form I'd like:
1. logo/title bar 2. main content 3. navigation 4. footer but in expanded form I'd like 1) -----2------ 3) -----4------ I've achieved something like this by making the inital number of columns be 15 and having the content span 14, but that is very magic number-y and I was hoping for something more intrinsic.
1. logo/title bar 2. main content 3. navigation 4. footer but in expanded form I'd like 1) -----2------ 3) -----4------ I've achieved something like this by making the inital number of columns be 15 and having the content span 14, but that is very magic number-y and I was hoping for something more intrinsic.
Temani Afif
CSS-Tricks
Responsive Layouts, Fewer Media Queries | CSS-Tricks
We cannot talk about web development without talking about Responsive Design. It’s just a given these days and has been for many years. Media queries are a
1 Reply
To get different height/width columns/rows, you can put different sizes in your
grid-template(-columns/-rows). For example:
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template