HTML CSS - ответные кнопки (сетка)

Question

У меня есть эта часть на веб-сайте, где есть кнопки, которые выглядят как сетка, но они просто выровнены обычным css. Он также имеет только 1 div, который служит его контейнером. Можно ли реагировать на кнопки так, чтобы при увеличении или уменьшении окна окна все еще были на месте? Благодаря!

HTML

<div class="middle"> 
     <center> 
     <br> 
     <br> 
     <button type="button3" class="button3"> 
     <a href="301.html">301</a> 
     </button> 
     <button type="button3" class="button3"> 
     <a href="305.html">305</a> 
     </button> 
     <button type="button3" class="button3"> 
     <a href="308.html">308</a> 
     </button> 
     <br> 

     <button type="button3" class="button3"> 
     <a href="303.html">303</a> 
     </button> 
     <button type="button3" class="button3"> 
     <a href="306.html">306</a> 
     </button> 
     <button type="button3" class="button3"> 
     <a href="309.html">309</a> 
     </button> 
     <br> 

     <button type="button3" class="button3"> 
     <a href="304.html">304</a> 
     </button> 
     <button type="button3" class="button3"> 
     <a href="307.html">307</a> 
     </button> 
     <button type="button3" class="button3"> 
     <a href="310.html">310</a> 
     </button> 
     <br> 

     <button type="button3" class="button3"> 
     <a href="311.html">311</a> 
     </button> 
     <button type="button3" class="button3"> 
     <a href="312.html">312</a> 
     </button> 



     </center> 
    </div> 

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

Answer 1

ширина обновления Просто в процентах для .button3 класса, как показано ниже

.button3 { 
    width: 30%; 
} 

Demo

Answer 2

Снять перерыва <br>, который размещается между группами кнопок. Это заставит все кнопки отрегулировать себя в сетках по мере изменения размера окна.

Если вам нужны все кнопки, всегда должны находиться в их точном месте (то есть ровно n количество кнопок в строке), тогда попробуйте указать ширину кнопки в процентах.