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

【问题标题】：How do I make the first grid item span 100%?如何使第一个网格项目跨度 100%？
【发布时间】：2018-10-31 00:42:21
【问题描述】：

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

【问题讨论】：

标签： html css css-grid

【解决方案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>

【讨论】：

很棒的答案，我会为任何 Magento 开发人员添加（是的，这有点脆弱），如果你想用 .lib-css() 来做这个，你应该使用 grid-column-start, 1 和 grid-column-end, -1 而不是 @ 987654326@速记

【解决方案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>

【讨论】：

【解决方案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%）。然后您不必担心考虑边距和网格间隙。这里有更多信息：The difference between percentage and fr units in CSS Grid Layout

【讨论】：