我有一个 CSS 网格，它的网格模板列设置为 grid-template-columns: repeat(auto-fit, minmax(225px, 1fr))
当我检查移动站点的响应能力时，网格元素只会变小并且不会堆叠。我试图让它们在移动设备上堆叠到 1fr 列中。我曾尝试使用媒体查询在断点处将网格模板列设置为 1fr，但没有奏效。
这是我所拥有的 CodePen 的链接https://codepen.io/Swildman/pen/ZEzqvXK
/* variables for colors */
:root {
--highlight-color: #ff7264;
--white-color: #fff;
--text-color: #7f7f7f;
--dark-bg-color: #2e2e2e;
--light-bg-color: #fff;
--gray-bg-color: #666;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* services section */
.services-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
grid-template-rows: repeat(3, 200px);
grid-gap: 5px;
margin: 5px;
}
.cell {
background: var(--highlight-color);
text-align: center;
color: var(--white-color);
padding: 10px;
}
.cell h3 {
font-size: 20px; …