Kevin Powell - Community•8mo ago

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 grid-template-rows: repeat(auto-fit, minmax(calc(1lh + 0.5em), 1fr)) ; as well as auto-fill ; both defined the first row but nothing after that. So how do i set the rows count to expand as they are needed depending on the columns value? 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

Miss Fox

CodePen

Dynamic grid-template rows

...

7 Replies

Chris Bolson•8mo ago

Not an answer to your question but , do you really need them to be in a ul? If you remove the UL and place the buttons directly inside the grid it should work as you want.

clevermissfoxOP•8mo ago

Ahh!! Chris!! I didn't know you were in this server! So basically the same kind of question I had yesterday on my challenge about using buttons inside the lis. I went back to the last challenge I had where I had button inside lis and tried to make them position absolute. I feel like it's semantically correct to be in a ul for this type of thing , and is a use case that pops up often enough. I would prob just remove the button focus and instead use li:focus within to fix the focus state issue but now that I've discovered it , I'm mostly curious how or if there's a way to define dynamic grid-template-rows when using autofit on the columns

Chris Bolson•8mo ago

👋 Yes, I hang out here too though admittedly not as much as the other place. I try to help out when I can. Why do you feel that it is semantically correct to be in a UL? It is not a list of items, it is a group of buttons. Having them directly inside the grid would make more sense to me. Kevin actually mentioned in one of his videos (several months ago now) the issue with over-using UL elements, especially as regards how screen-readers have to go through them. However, none of this answers you base question to which I'm afraid, right now, I don't have an answer.

SvenSplynter•8mo ago

How nice. An iCodeThis reunion! 🙂

clevermissfoxOP•8mo ago

It is a list of interests though , that just happen to be in the form of buttons or links? I could be wrong , it’s just been hammered into me that if it’s a list use a UL.

MarkBoots•8mo ago

use a pseudo element on the button that is positioned absolute, relative to the li. and use that for the focus styling?

li{
  position: relative;
  > button {
    
    &:focus::after{
      content: "";
      position: absolute;
      inset: 0;
    }
  }
}

li{
  position: relative;
  > button {
    
    &:focus::after{
      content: "";
      position: absolute;
      inset: 0;
    }
  }
}

like this, the li still has the height of the button, and the button:focus has the same width/height as the li

clevermissfoxOP•7mo ago

In that case I would probably take the focus outline off the button and use focus-within on the li. But that’s another good idea! At this point I’m just wondering how anyone sets grid-rows on columns set to auto-fit. i had given up but just found the answer so wanted to update; reminder, question was how to use auto-fit columns with grid-items that are postion absolute so dont take up space in the block direction. of course, we dont want to hard-code how many rows when we are using the auto-fit keyword so the answer was grid-auto-rows: calc(1lh + 1em) !

Gaming

Programming

Grid-template-columns: auto-fit... but what of grid-template-rows?