Grid-template-columns: auto-fit... but what of grid-template-rows?
In this example, I happily used grid-template-columns: repeat(auto-fit, etc); these buttons are actually ul>li > buttons. I did discover when tabbing through that the button was being focused on within the li so different sizes etc. (if you tab through the codepen when it opens youll see what i mean)
I know this could be easily solved taking off the button:focus outline and instead moving it to the li with li:focus-within. However, i am curious about how to solve this in the use case where i have :
--parent grid set to grid-template-columns: repeat(auto-fit)
--button set to absolute, inset: 0, with li as position: relative;
--parent grid ROWs set to....?
obviously as the button becomes absolute, the lis collapse in height as there is no content within to define that space. I thought, no problem, i will set the grid-rows. But when i began to, i had no idea what values to set. As the columns are set to auto-fit, the rows have to be dynamic so they cant be set explicitly (unless isnt there a trick to set them to 99 or something more than ill need? or that may only apply to rows with "content" that will take up space?) ; i could give the li's the block-padding i need but it still is looking so tall ...
tried
I know I could do so with a custom property and JavaScript , just wondering what ppl do in css when they have a template columns of auto-fit but still need to define template-rows?
https://codepen.io/Miss-Fox/pen/oNOJgKe?editors=0100
default styles are applied, but at the very bottom of the css are the selectors and properties ive mentioned here to easily toggle on
I know this could be easily solved taking off the button:focus outline and instead moving it to the li with li:focus-within. However, i am curious about how to solve this in the use case where i have :
--parent grid set to grid-template-columns: repeat(auto-fit)
--button set to absolute, inset: 0, with li as position: relative;
--parent grid ROWs set to....?
obviously as the button becomes absolute, the lis collapse in height as there is no content within to define that space. I thought, no problem, i will set the grid-rows. But when i began to, i had no idea what values to set. As the columns are set to auto-fit, the rows have to be dynamic so they cant be set explicitly (unless isnt there a trick to set them to 99 or something more than ill need? or that may only apply to rows with "content" that will take up space?) ; i could give the li's the block-padding i need but it still is looking so tall ...
tried
grid-template-rows: repeat(auto-fit, minmax(calc(1lh + 0.5em), 1fr)) ;I know I could do so with a custom property and JavaScript , just wondering what ppl do in css when they have a template columns of auto-fit but still need to define template-rows?
https://codepen.io/Miss-Fox/pen/oNOJgKe?editors=0100
default styles are applied, but at the very bottom of the css are the selectors and properties ive mentioned here to easily toggle on
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
