我有以下桌面版，它创建了 4 个相等的列，全部为 25%。
.footer-inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
<div class="footer-inner">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
但是，如何在媒体查询中调整它们的大小，使第一列变为 100%，其余列自然地包裹在下面，现在仍然使用 CSS 网格为 33.333%？
.footer-inner {
display: grid;
grid-template-columns: 100% 1fr 1fr 1fr;
/* AND THIS */
grid-template-columns: 100% 33.333% 33.333% 33.333%;
}
将网格更改为三列，并将第一个 div 设置为在适当的点跨越所有列。
.footer-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.footer-inner div {
border: 1px solid grey;
text-align: center;
}
.footer-inner :first-child {
grid-column: 1 / -1;
}
<div class="footer-inner">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
