scrollbars (fixed table header use-case) table container must know its size, but fractions does not determine the size. Remove the <table></table>, to see how layout should look like.
2) To render Leaflet map (and i believe other map solutions too) its container should know its size, but fractions does not determine the size of grid area.
At the same time i have slide-out sidebar which should take the width of the component i will put there. it can be 3rem, 30rem or whatever. So it should squeeze its sibling area (main).
If i use % instead of fractions, then i think i should care about area margins/paddings, but i liked grid-gap so much. :)
Currently i have only 2 solutions in mind. Flexbox with some wrappers and probably JavaScript to detect the size of areas offsets and then to apply those sizes to containers, but i do not prefer those solutions.
Is CSS Grid right tool for this task?
It would be nice to have some magic feature which turns on fractions in kinda pixel mode. :) Like, you still use fractions, but area size can be captured as pixels.
I added image of how does it should look at the end. Horizontally scroll-able tables with vertically scroll-able tbody so table header stay on top when scrolling vertically. For that i need to know grid area dimension.
I have 2 issues: 1) To have
scrollbars (fixed table header use-case) table container must know its size, but fractions does not determine the size. Remove the<table></table>, to see how layout should look like. 2) To render Leaflet map (and i believe other map solutions too) its container should know its size, but fractions does not determine the size of grid area.This is the sample layout i need to build. I skipped 2nd table under first one for simplicity.
At the same time i have slide-out sidebar which should take the width of the component i will put there. it can be 3rem, 30rem or whatever. So it should squeeze its sibling area (main).
If i use % instead of fractions, then i think i should care about area margins/paddings, but i liked
grid-gapso much. :)Currently i have only 2 solutions in mind. Flexbox with some wrappers and probably JavaScript to detect the size of areas offsets and then to apply those sizes to containers, but i do not prefer those solutions.
Is CSS Grid right tool for this task?
It would be nice to have some magic feature which turns on fractions in kinda pixel mode. :) Like, you still use fractions, but area size can be captured as pixels.
I added image of how does it should look at the end. Horizontally scroll-able tables with vertically scroll-able
tbodyso table header stay on top when scrolling vertically. For that i need to know grid area dimension.I made this Codepen example, but it was possible only because i eliminated usage of fractions.