Grid Help: Drum Machine pads not flowing into columns

Grid Help: Drum Machine pads not flowing into columns
0

#1

Hi, I need some CSS Grid help.

Here’s my codepen for the Drum Machine project. It’s not complete and rather ugly, but I’m close.

Why do my drum machine pads show up one per row? I outlined them in green. Each drum-pad CSS class is inside the pad-bank class. I’ve defined the display as grid, and specified the columns and rows to be 3 X 3.

I’m hoping I don’t need to specify each drum pad’s exact column and row location. I believe I can specify each location by writing inline grid-column and grid-row values in the <DrumPad/> JSX render function. But I really don’t want to.


#2

No you don’t need to do that.

I do not see any grid in that div with the pad-bank-class.
You need something like:

grid-template-columns: auto auto auto;
display: grid;

ps: in the drum-pad class are strange width/height-values:
width: $padWidth;
height: $padHeight;


#3

Hmm, well I copied that syntax from the example codepen for Drum Machine.
Those are values defined as:

$padWidth: 100px;
$padHeight: 80px;

But I guess I’m not using them right. I replaced them with 100px and 80px, respectively, and now it works.

As to your issue with the pad-bank class not having the display: grid value, yes it exists there. I don’t know why you think it’s not there. Here is the pad-bank class:

.pad-bank {
    width: 100 * 3 + 32;
    height: 80 * 3 + 32;
    margin: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    justify-items: center;
  }

Anyway, it seems to be working now. I’m not finding React to be hard, but CSS is a real time burner.


#4

Here’s the example FCC Drum Machine codepen:


What is $padHeight in the CSS file? It’s not a CSS variable because that is defined with dash-dash, as in:
--penguin-skin: gray;


#5

The example uses SCSS and you are using CSS (you can change that in codepen-settings). in SCSS you can use variables like $padHeigth.
In SCSS you can also write mixins (a kind of function).

pad-bank class: I’ve checked it only in Chrome developer tools and there the display:grid was not visible maybe bacause of an css-error. But now it’s there!


#6

I see! Thank you.

So it choked on the variable and ignored everything after it.