移动端实现css网格的问题答案

【问题标题】：problem with realisation css grid for mobile移动端实现css网格的问题
【发布时间】：2020-08-17 18:14:30
【问题描述】：

我有以下代码。

我有一个包含 3 项（版权、隐私和条款）的页脚部分。

对于桌面，我按照样式编写页脚

    .footer {
      display: grid;
        grid-template-columns: 70% 15% 15%;
    }

而且运行良好。

现在移动版（230px - 600px）我想要以下设计。

design for mobile version

请帮助我使用网格实现该设计。也许我应该更改 HTML div 结构？

【问题讨论】：

您需要在此处在您的问题中发布minimal reproducible example，并在任何第三方网站上发布not a link。
@Rob，我放了代码部分和图片，我没有放任何其他链接

标签： html css css-grid

【解决方案1】：

您必须将类名添加到需要操作的 div 中。并在移动媒体查询中添加此 css：

@media only screen and (max-width: 600px) and (min-width: 230px) {
  .footer {
    grid-template-columns: 50% 50%;
    border: 1px solid black;
  }

  .copyright {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
  }

  .privacy {
    grid-column-start: 1;
  }

  .terms {
    grid-column-start: 2;
  }
}

您可以查看此链接codesandbox

css-tricks中的 css 网格链接也非常有用

【讨论】：