@aUnicornDev
Posted
The reason why you had to use a padding-bottom of 100px on .inputContainer is because the grid is a little defective.
You used percentages on your grid-template-rows and columns and a gap of 15px.
The percentages would take up the the specified percent width and will not take into account the gap that you set in the grid.
Use this instead:
grid-template-rows: repeat(5,1fr);
grid-template-columns: repeat(4,1fr);
This will create the exact grid you wan as it will take the gap into consideration and hen calculate the value of 1fr(Fractional Unit).
Then you can easily change the whole grid size in order to set the buttons as you like.
For the theme, use CSS variables in defining the basic colors of buttons, background, etc. and change them using JS on change of the theme switch.
Marked as helpful
@glowes
Posted
@aUnicornDev Hi there! Thanks for the tips and advice! I will definitely try those!
