Question

我正在尝试利用CSS网格（第一次），我在解决一些基本问题。

我正在建立一个包含三个部分的页脚。

  #footer-content {
    position: relative;
    margin: 0 auto;
    padding: 0 20px;
    max-width: $max-width;
    width: 100%;
    height: 100%;
    color: white;

    display: grid;
    grid-template-columns: 12% 12% 76%;
}

对于移动设备：

@media only screen and (max-width: 800px) {
  #footer-content {
      grid-template-columns: 50% 50% 100%;
    }
}

上面的代码存在问题：第三个元素（宽度100％）没有推送到下一行，而是出现在屏幕之外。

使用grid-template-columns: repeat(auto-fit, 50% 50% 100%);无效。

使用grid-template-columns: repeat(auto-fit, 50%);的方法是：将第三个元素下推，但是的宽度仅为50％，而不是100％。

问题：：如何使用CSS网格自动调整三个大小不同的列？

Answer 1

网格列不会自动换行，因此对于{strong>两个列，此grid-template-columns: 50% 50% 100%;毫无意义。您将定义两个列，并告诉第三个元素在下一行中将它们都覆盖。

.box {
  height: 150px;
  background: lightblue;
  border: 1px solid grey;
}

#footer-content {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: .25em;
}

.box:nth-child(3) {
  grid-column: span 2;
}

<div id="footer-content">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS网格|如何自动安装不同尺寸的色谱柱？

1 个答案: