CSS: Adjust Grid Height / Overlap

1

I’m trying to use grid to organize my drum machine inputs here. PadBank is parent to DrumPad.

Code:

.pad-bank{
  display: grid;
  grid: 50px / auto auto auto;
  
  justify-content: center;
}

.drum-pad{
  position: relative;
  border: 2px inset green;
  border-radius: 25px;
  height: 50px;
  width: 50px; 
  margin: 5px;
  
  background-image: radial-gradient(yellow, green);
  cursor:pointer;
}

Problem is, the top row is too high and also overlaps the second. I’m not sure how to specify row height? And padding/margin doesn’t seem to help?

Could anyone give me some suggestions please?

2

Hello there,

I am not sure exactly, what you are referring to. I change to this, and it looks about right:

grid: 1fr / auto auto auto;

Hope this helps