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.