在断点处更改栅格模板

Question

我有一些产品垫，我尝试在断点1200处更改网格模板。

产品没有区域而是自动流是很有必要的。

在断点下，除非有2列3行，否则我有3列和一个屏蔽的列。我认为grid-3-2中缺少了一些东西，自动流不能解决这个问题。我必须遵循li命令才能显示。

提前感谢您的帮助！下面是我的代码=)

​

.grid-3-2{
    display: grid;
    grid-template-columns: 390px 390px 390px;
    grid-template-rows: 607px 607px 260px 607px 607px;
    grid-row-gap: 61px;
    grid-column-gap: 2px;
    justify-content: center;
    margin-left: -40px;
    margin-top: 21px;
}

@media(max-width: 1200px){
    .grid-3-2{
        display: grid;
        max-width: 782px;
        grid-template-columns: 390px 390px;
        grid-template-rows: 607px 607px 607px 260px 607px 607px 607px;
        grid-row-gap: 61px;
        grid-column-gap: 2px;
        justify-content: center;
        margin-left: -40px;
        margin-top: 21px;
    }   
}

<ol class="grid-3-2">
    <li class="product"></li>
    <li class="product"></li>
    <li class="product"></li>
    <li class="product"></li>
    <li class="product"></li>
    <li class="product"></li>
</ol>

​

Answer 1

您的代码看起来运行得很好。我唯一推荐使用的是repeat(multiples, value)，只要所有的值都是相等的，而不是写每个需要的网格项值。

此外，当在断点处更改某些内容时，只编写所需的更改，而不复制其他属性，因为它们仍然会被应用。

下面的示例与您的示例类似，但值最小，请使用完整页面运行代码片段并调整页面大小以注意差异。

​

.product {
  background-color: cyan;
}

.grid-3-2 {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 50px);
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}

@media(max-width: 1200px) {
  .grid-3-2 {
    grid-template-columns: repeat(2, 100px);
    grid-template-rows: repeat(3, 50px);
  }
}

<ol class="grid-3-2">
  <li class="product"></li>
  <li class="product"></li>
  <li class="product"></li>
  <li class="product"></li>
  <li class="product"></li>
  <li class="product"></li>
</ol>

​

Answer 2

我知道为什么它不能工作了，我有一个图像板。当我拿掉它的时候，它就是工作。因为grid-column-start: 1；grid-column-end: 4；

脸部贴……

感谢帮助，我将执行grid-column-start: 1；grid-column-end: 3；