HTML CSS – Botones de respuesta (cuadrícula)

Tengo esta parte en un sitio web en el que hay botones que parecen una cuadrícula, pero están alineados con el CSS habitual. También solo tiene 1 div que sirve como su contenedor. ¿Es posible hacer que los botones sean receptivos para que cuando la ventana se escala más grande o más pequeña, los botones sigan en su lugar? ¡Gracias!

HTML

 

CSS

 .button { height: 40px; width: 130px; margin-bottom: 3%; background-color: #7C8082; font-size: 100%; color: white; font-family: 'Muli', sans-serif; border-radius: 5px; border-color: #ffffff; } .button:hover { background-color: #474240; font-family: 'Muli', sans-serif; } .button1 { height: 40px; width: 70px; background-color: #7C8082; font-size: 100%; color: white; font-family: 'Muli', sans-serif; border-radius: 5px; margin-top:5px; } .button1:hover { background-color: #474240; } .button3 { height: 40px; width: 70px; background-color: #7C8082; font-size: 100%; color: white; font-family: 'Muli', sans-serif; border-radius: 5px; margin-top:10px; } .button3:hover { background-color: #474240; } 

Simplemente actualice el ancho en porcentaje para la clase .button3 como se muestra a continuación

 .button3 { width: 30%; } 

Manifestación

Eliminar el descanso
que se coloca entre los grupos de botones. Esto hará que todos los botones se ajusten en cuadrículas ya que el tamaño de la ventana puede variar.

Si necesita que todos los botones siempre estén en su lugar exacto (es decir, exactamente n número de botones en una fila), intente dar el ancho del botón en porcentaje.