如何使第一个网格项目跨度 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%，其余列自然环绕在下面，现在 33.333% 仍在使用 CSS 网格？

.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，创建的所有列将消耗行中的相等分配的空闲 space。 grid-row: 1 应用于所有项目后，它们将出现在第一行。

窄屏

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

最后，考虑在您的轨道大小中使用 fr 单位而不是百分比（如 33.33%）。这样您就不必担心考虑边距和网格间隙。这里有更多信息：

如何使第一个网格项目跨度 100%？

How do I make the first grid item span 100%?

html

css

css-grid