3 column layout where outer columns are the same width with middle taking up rest of space?
This is for a header, I have a logo and logotype on the left, buttons on the right, and I am planning to have a search box in the middle and I want it to be central which does mean that I need left and right to be the same width even though content on one side will have empty space
I can use grid to make all columns the same width but I can't then specify that the middle column should be super wide. Also tried flexbox but that appears to be a dead end. My usual front end person is dealing with stuff so I can't ask her
I've tried:
- grid with 1fr auto 1fr and making the middle column try and be 100%
- flexbox trying to see if I can make the flex basis the same for left and right
- grid with 3 columns that are the same and trying to push middle to be wider
Current solution:
- Duplicate left and right so each side has a copy of both within the same grid cell, but on the left the right clone is opacity 0 and pointer-events none. They will have to grow to the largest https://codepen.io/skylarkx/pen/ZYGMzYE
I can use grid to make all columns the same width but I can't then specify that the middle column should be super wide. Also tried flexbox but that appears to be a dead end. My usual front end person is dealing with stuff so I can't ask her
I've tried:
- grid with 1fr auto 1fr and making the middle column try and be 100%
- flexbox trying to see if I can make the flex basis the same for left and right
- grid with 3 columns that are the same and trying to push middle to be wider
Current solution:
- Duplicate left and right so each side has a copy of both within the same grid cell, but on the left the right clone is opacity 0 and pointer-events none. They will have to grow to the largest https://codepen.io/skylarkx/pen/ZYGMzYE
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
