Question

桌面有以下内容，它创建4个相等的列，全部为25％。

$('.datepicker').pickadate({
  selectMonths: true, // Creates a dropdown to control month
  selectYears: 40 // Creates a dropdown of 15 years to control year
});

.footer-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

但是，如何在媒体查询中调整这些大小以使第一列达到100％并且其余列自然地包含在下面，现在仍然是33.333％仍在使用CSS网格？

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

Answer 1

将网格更改为三列，并将第一个div设置为在适当的位置跨越它们。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用grid-column: span 3上的:first-child设置：

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

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％）。那么您不必担心边际和网格间隙的因素。以下是一些更多信息：The difference between percentage and fr units in CSS Grid Layout

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

3 个答案: