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

我正在开发一个web应用程序，它可以从一些文本框生成网格布局。我的问题是我不能动态生成响应代码，我被迫使用一个样式表来加载响应代码

现在，虽然我不熟悉CSS和网格，但我已经能够使用以下代码成功创建网格：

/*网格布局*/
.lt网格容器{
显示：网格；
网格模板柱：1fr 1fr；
网格模板行：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr；
}
.lt-1{网格区域：1/1/2/3；}
.lt-2{网格区域：2/1/3/3；}
.lt-3{网格区域：3/2/5/3；}
.lt-4{网格区域：3/1/4/2；}
/*响应代码*/
@介质（最大宽度：768px）{
.lt网格容器{
网格模板行：自动；/*不更改*/
网格模板列：1fr；/*不更改*/
}
.lt-1{
网格面积：1/1/2/2；
}
.lt-2{
网格面积：2/1/3/2；
}
.lt-3{
网格面积：3/1/4/2；
}
.lt-4{
网格面积：4/1/5/2；
}
}

免费下载：最佳联盟营销工具。

您可以试试

@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;
  }
}

网格行端

和

网格列端

的

span 1

值起作用，使每个网格项仅覆盖一条垂直轨道和一条水平轨道。

---

grid row start

的

auto

值将一个接一个地堆叠它们

您说“我希望对所有自动生成的css代码使用相同的响应代码”是指生成的HTML吗？或者你正在使用某种CSS预处理器？如果是这样，这与问题非常相关，您可能应该将处理器添加为标记。如果您不希望基于特定的类名应用CSS，那么您需要查找其他内容，例如DOM中元素之间的关系。但为了能就此提供进一步的建议，我们需要看一些您希望应用的HTML结构的示例。@DBS yup生成的HTML。@04FS添加了一些HTML代码您的意思是：您从外部源获取HTML和CSS代码，并且您希望有一个适用于移动客户端的CSS代码，该代码适用于每个给定的HTML代码？哇，这确实有效。我就知道有人能概括这整件事。细心的人可以概括这些棘手的情况。非常感谢