如何为网格布局中的多个生成项目编写响应式 CSS？

Question

我正在开发一个从一些文本框生成网格布局的网络应用程序。我的问题是我无法即时生成响应代码，不得不使用一个样式表来加载响应代码。

虽然我是 CSS 和网格的新手，但我已经能够使用以下代码成功创建网格：

/* grid layout */

.lt-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.lt-1 { grid-area: 1 / 1 / 2 / 3; }

.lt-2 { grid-area: 2 / 1 / 3 / 3; }

.lt-3 { grid-area: 3 / 2 / 5 / 3; }

.lt-4 { grid-area: 3 / 1 / 4 / 2; }

/* responsive code */

@media (max-width: 768px) {
    .lt-grid-container {
        grid-template-rows: auto;   /*dont change */
        grid-template-columns: 1fr;   /* dont change */
    }

    .lt-1 {
      grid-area: 1 / 1 / 2 / 2;
    }

    .lt-2 {
      grid-area: 2 / 1 / 3 / 2;
    }

    .lt-3 {
      grid-area: 3 / 1 / 4 / 2;
    }

    .lt-4 {
      grid-area: 4 / 1 / 5 / 2;
    }
}

<div style="border: 1px solid #4CAF50;color: #000000; background-color: #fff">
    <div style="background-color: #4CAF50; min-height: 30px;">
    </div>
    <div style="justify-self: center; align-self: center;margin: 1.3em; font-size: 1.3em;">Free Download: Best affiliate marketing tools.
    </div>
    <div style="margin: 1.3em;justify-self: center; align-self: center;">
    <a href="#" target="_blank">
    <span > Click Me!</span>
    </a> 
    </div>
</div>

所以我的整个部分变成了一个接一个的专栏。问题是，虽然我的代码的第一部分是动态生成的，但响应部分是静态的。

我希望将相同的响应代码用于所有自动生成的 CSS 代码，并且仅适用于特定的选择器。我希望即使 class 名称发生变化，同一组响应代码也可用于多个 CSS 代码。

我不知道如何使用 nth-child 或可以推广的东西生成响应式设计。所以我创建了类似的东西：

@media (max-width: 768px) {
    .alldivs {
        grid-template-rows: auto;   /* dont change */
        grid-template-columns: 1fr;   /* dont change */
    }
    .child1 {
      grid-area: 1 / 1 / 2 / 2;
    }

    .child2 {
      grid-area: 2 / 1 / 3 / 2;
    }
}

从那里开始，我不知道该怎么做。

Answer 1

你可以试试

@media (max-width: 768px) {
  .lt-grid-container {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
  .lt-grid-container > * {
    grid-area: auto / 1 / span 1 / span 1;
  }
}

grid-row-end 和 grid-column-end 的 span 1 值有效，因此每个网格项目仅覆盖一个垂直和一个水平轨道。 grid-row-start 的 auto 值会将它们一个接一个地堆叠起来

如何为网格布局中的多个生成项目编写响应式 CSS？

How can I write responsive CSS for multiple generated items in a grid layout?

html

css

css-grid

responsive