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.
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
Wolle
Wolleβ€’14mo ago
To get different height/width columns/rows, you can put different sizes in your grid-template(-columns/-rows). For example:
grid-template-columns: 300px 1fr;
grid-template-rows: 80px 1fr 120px;
grid-template-columns: 300px 1fr;
grid-template-rows: 80px 1fr 120px;
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
Want results from more Discord servers?
Add your server