HTML CSS-响应按钮（网格）

我在一个网站上看到了这一部分，其中有一些按钮看起来像一个网格，但它们只是通过通常的css对齐。它也只有一个div作为它的容器。是否可以使按钮具有响应性，以便在放大或缩小窗口时，按钮仍在原位？谢谢

HTML

---

只需更新.button3类的宽度百分比，如下所示

.button3 {
   width: 30%;
}

---

移除按钮组之间的中断

。 这将使所有按钮在网格中随着窗口大小的变化自行调整

如果您需要所有按钮都应始终位于正确的位置（即一行中有n个按钮），请尝试以百分比形式给出按钮的宽度

.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;
    }

.button3 {
   width: 30%;
}