自适应CSS网格

Question

有人可以帮助我将响应式CSS添加到此网格吗？我希望每个网格项目都可以堆叠在移动设备上。

https://codepen.io/benpjam/pen/ebMJRW

HTML                

付费媒体

在线付费媒体可以成为潜在客户产生和销售的强大策略。借助数据驱动器的优化和持续的管理，付费媒体对于广告客户来说也是一种非常经济高效的选择。

       

付费媒体

在线付费媒体可以成为潜在客户产生和销售的强大策略。借助数据驱动器的优化和持续的管理，付费媒体对于广告客户来说也是一种非常经济高效的选择。

      

SEO

    

搜索引擎优化不仅仅是您网站上的关键字。从本地引用到元数据再到架构标记，您的SEO策略在方法上必须具有技术性和周到性。

      

网站开发

    我们创建从头开始构建的引人注目的高性能网站。没有模板或Cookie切割器设计，只有令人惊叹，响应迅速，针对转化进行了优化的网站和登录页面。       

数据与分析

    数据应影响您的营销策略中做出的每个决定。有了正确的KPI，我们将对每个数据点进行切片，以了解如何进行最具影响力的优化。

    

CSS

    .container {
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  justify-content:center;
}

.lawyer-form {
  background-color:blue;
  min-height: 500px;
  grid-column: 1/3;
  grid-row:1/5;
}

.paid-media {
  background-color:red;
  min-height:100px;
  grid-column:3/5;
    grid-row:1/3;
  padding:20px;
}

.seo {
  background-color:green;
  min-height:100px;
  grid-column:3/5;
    grid-row:3/5;
  padding:20px;
}

.web-dev {
  background-color:yellow;
  min-height:100px;
  grid-column:5/7;
    grid-row:1/3;
  padding:20px;
}

.analytics {
  background-color:orange;
  min-height:100px;
  grid-column:5/7;
    grid-row:3/5;
}

@media only screen and (max-width: 980px) {
  .container {
  display:grid;
  grid-template-columns:1fr;
}

}

Answer 1

本，

我要这样做的方法是，首先编写CSS以便在移动设备上正确显示。为了在移动设备上显示，您不希望应用网格。在使移动设备查看所需的方式后，可以使用媒体查询在指定的px大小以上时应用网格。

希望这会有所帮助。

您可以在这里找到我的标记CSS：

.lawyer-form {
 background-color:blue;
 min-height: 500px;
 grid-column: 1/3;
 grid-row:1/5;
}
.paid-media {
 background-color:red;
 min-height:100px;
 grid-column:3/5;
 grid-row:1/3;
 padding:20px;
}

.seo {
 background-color:green;
 min-height:100px;
 grid-column:3/5;
 grid-row:3/5;
 padding:20px;
}

.web-dev {
 background-color:yellow;
 min-height:100px;
 grid-column:5/7;
 grid-row:1/3;
 padding:20px;
}

.analytics {
 background-color:orange;
 min-height:100px;
 grid-column:5/7;
 grid-row:3/5;
}

@media only screen and (min-width: 980px) {
 .container {
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  justify-content:center;
}}

https://codepen.io/parisotdev/pen/oJqxdg