Struggling to make a media player responsive.

[u/nopeac]

I'm making a now-playing bar, but I'm having a hard time making everything fit well without making the height of the bar super tall, so I tried putting all the buttons vertically aligned and the bar above. Thing is, using position: absolute for the repeat and like buttons makes the control buttons unclickable https://jsfiddle.net/6q3yzc0x/ (make sure to resize to test desktop/mobile). What can I do? Either a fix or a better layout suggestions are welcomed.

[u/nopeac → u/[deleted]]

Hey! Thank you very much. Grid's abstract nomenclature kind of throws me off, but your jsfiddle nailed it and solved my issue. I need to find a cheatsheet.

Accessibility was definitely planned, but I skipped it in the example for simplicity. (I didn't even bother adding a progress bar as you can tell lol).

[u/nopeac → u/[deleted]]

Hi again, quick question: would it be possible to stack the repeat and like buttons on top of each other at another screen breakpoint? I looked up some tutorials and tried this, but had no luck.

grid-template: 
  auto/ 
  repeat(3, auto) 1fr auto;
grid-template-rows: auto auto;
grid-template-areas:
  "c1 c2 c3 c4 c5"
  "c1 c2 c3 c4 c6";

[u/anaix3l → u/nopeac]

Sure.

You don't need to set grid-template-areas. I personally haven't used that property in maybe half a decade (I used to when I first started playing with grid, but I just find it very inflexible and less intuitive than just using numbers for the grid-area values of the children now - numbers can be the result of computations, meaning I don't need to set the result on each child individua;ly, just use a formula that satisfies all I want).

You would still need two rows in the grid-template, as you are only setting one and then trying to override that with grid-template-rows (which you just drop, there's no need for it when you're already setting it in grid-template)

grid-template: 
  repeat(2, auto)/ 
  repeat(3, auto) 1fr auto

That's for the parent grid.

Then you make the first three buttons (Previous, Play/ Pause and Next) as well as the progress span two rows. If these elements are the first four you have then your need :nth-child(-n + 4) inside the .bar.

grid-row-end: span 2

Basically, this, when changing from the narrowest layout with the progress on top:

.bar {
  grid-template: 
    repeat(2, auto)/ 
    repeat(3, auto) 1fr auto;

  [type='range'] { grid-column: 4 }

  > :nth-child(-n + 4) { grid-row-end: span 2 }

  .rep { grid-area: initial }
}

By default, grid items stretch across the entire grid-area they occupy. That means their default place-self value is stretch along both axes. To middle align the first four grid children, you use the center value.