我正在try 让我创建的网格正确地换行以便于移动访问，但当窗口大小足够小时，网格不会换行.
我一直在try 使用auto-fill和auto-fit来换行，这确实有效，但按钮不会自动间隔以适应更大的窗口大小的整个页面.当页面变小时，有没有办法让按钮绕过来，但仍然自动向右间隔.我在使用自动填充和适应时遇到的问题还要求所有按钮的大小相同，否则按钮的间距将不均匀.
下面的代码是我现在有的版本，它使用了自动作为网格间距.
.bttns {
display: grid;
grid-template-columns: auto auto auto auto auto;
border-bottom: 7px solid #4A3E94;
background-color: #d19dfc;
font-family: 'Lucida Console', "Lucida Console", monospace;
}
.b1 {
a:link,
a:visited {
background-color: #4A3E94;
color: white;
padding: 3px 10px;
text-decoration: none;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
border: 2px solid #4A3E94;
border-radius: 7px;
}
margin-right: 20px;
font-size: 30px;
text-align: center;
}
.b2 {
a:link,
a:visited {
background-color: #4A3E94;
color: white;
padding: 3px 10px;
text-decoration: none;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
border: 2px solid #4A3E94;
border-radius: 7px;
}
margin-right: 20px;
font-size: 30px;
text-align: center;
}
.b3 {
a:link,
a:visited {
background-color: #4A3E94;
color: white;
padding: 3px 10px;
text-decoration: none;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
border: 2px solid #4A3E94;
border-radius: 7px;
}
margin-right: 20px;
font-size: 30px;
text-align: center;
}
.b4 {
a:link,
a:visited {
background-color: #4A3E94;
color: white;
padding: 3px 10px;
text-decoration: none;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
border: 2px solid #4A3E94;
border-radius: 7px;
}
margin-right: 20px;
font-size: 30px;
text-align: center;
}
.b5 {
a:link,
a:visited {
background-color: #4A3E94;
color: white;
padding: 3px 10px;
text-decoration: none;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
border: 2px solid #4A3E94;
border-radius: 7px;
}
font-size: 30px;
text-align: center;
}<div class="bttns">
<div class="b1">
<a href="Imagess/pholdr.png" target="_blank">Art</a>
</div>
<div class="b2">
<a href="Imagess/pholdr.png" target="_blank">Blog</a>
</div>
<div class="b3">
<a href="/About/abt.html" target="_self">About</a>
</div>
<div class="b4">
<a href="Imagess/steviekitty.png" target="_blank">Music</a>
</div>
<div class="b5">
<a href="Imagess/kittr.png" target="_blank">WIP</a>
</div>
</div>