如何使第一个网格项跨度为 100%?

Question

我有以下内容用于桌面，它创建 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%;
}

Answer 1

将网格更改为三列，并将第一列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>

Answer 2

您可以使用:first-child上设置的grid-column: span 3来执行此操作：

.footer-inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 650px) {
.footer-inner {
grid-template-columns: repeat(3, 1fr);
}
.footer-inner > div:first-child {
grid-column: span 3;
border: 1px solid;
}
}

<div class="footer-inner">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>

Answer 3

这是一个非常简单的方法。您只需要三行代码。

对于宽屏：

.footer-inner {
display: grid;
grid-auto-columns: 1fr;
}
.footer-inner > div {
grid-row: 1;
}
/* non-essential demo styles */
.footer-inner { background-color: gray; grid-gap: 1px; }
.footer-inner > div { background-color: lightgreen; text-align: center; padding: 5px;}

<div class="footer-inner">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>

对于窄屏幕：

.footer-inner {
display: grid;
grid-auto-columns: 1fr;
}
.footer-inner > div:first-child {
grid-column: span 3;
}
/* non-essential demo styles */
.footer-inner { background-color: gray; grid-gap: 1px; }
.footer-inner > div { background-color: lightgreen; text-align: center; padding: 5px;}

<div class="footer-inner">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>

解释

宽屏

grid-auto-columns属性设置隐式列的宽度。通过将值设置为1fr，创建的所有列都将占用行中平均分配的可用空间。将grid-row: 1应用于所有项目后，它们将显示在第一行。

窄屏幕

将第一项设置为跨越三个隐式列后，容器必须创建三个列。然后，其余项目可以整齐地放在新创建的列的下方。

---

最后，请考虑在轨道大小调整中使用fr单位而不是百分比(如 33.33%(。这样，您就不必担心考虑利润和网格差距。以下是更多信息：CSS 网格布局中百分比和 fr 单位之间的区别