Question

grid-template-columns的命名如何与媒体查询和响应能力有关？

我正在尝试学习此方法，并从一个非常基本的2列网格开始，从平板电脑开始，在其50/50网格上方，但是我下面的平板电脑希望彼此叠置。

我正在使用fr单位，因此当我想要50/50时每边使用1fr，但是如何告诉它在移动设备上忽略它呢？

auto似乎无效，100%也无效。

这是我到目前为止所拥有的。网格设置：

.f-2-grid {
  grid-template-columns: [left-side] auto [right-side] auto;
}

@media (min-width: 46.25em) {
  .f-2-grid {
    grid-template-columns: [left-side] 1fr [right-side] 1fr;
  }
}

定位2列：

.footer-contact.f-2-grid-box {
  grid-column: left-side;
}

.follow-icons.f-2-grid-box {
  grid-column: right-side;
}

我确定这是一个简单的想法，对于这个简单的问题表示歉意，但似乎无法从我阅读的所有教程中找到正确的方法。

Answer 1

如果您希望它在移动设备上只有一个列，请仅定义一个：

@media (min-width: 46.25em) {
  .f-2-grid {
    grid-template-columns: 100%;
  }
}

您可能应该删除显式的grid-column属性，因为它只有1列。

我不确定这是否是你要的。

Answer 2

谢谢你，它使我走上了正确的路...这成功了...

.f-2-grid {
  /*nothing needed here*/
}

@media (min-width: 46.25em) {
  .f-2-grid {
    grid-template-columns: [left-side] 1fr [right-side] 1fr;
  }
}

@media (min-width: 46.25em) {
  .footer-contact.f-2-grid-box {
    grid-column: left-side;
  }
}


@media (min-width: 46.25em) {
  .follow-icons.f-2-grid-box {
    grid-column: right-side;
  }
}

响应式命名网格模板列？

2 个答案: