如何在响应式 UI 中修复 div 的位置答案

【问题标题】：How to fix the position of div's in responsive UI如何在响应式 UI 中修复 div 的位置
【发布时间】：2018-02-26 00:06:41
【问题描述】：

我必须在网格中显示内容。所有项目都是随机高度的 div，我需要控制它们的显示方式。它是一个具有 4-cols、3-cols 和 1-cols 的响应式 UI。假设 X 在 javascript 数组中可用，G 是谷歌广告。

有没有我可以在基础中使用的类来实现这一点。还是我需要根据分辨率动态生成网格。

4*4

X  2  3  X
5  G  7  X
9  X  11 12

3*3

X 2 X
4 G X
7 X 9

【问题讨论】：

如果它们都是相同的宽度，使用 CSS 应该很容易，这对我有帮助 learnlayout.com/inline-block.html
它必须回退到具有上述格式的 3-cols。如果我使用内联布局 4 个 div，在较小的设备中查看时，3*3 布局中的第一列将是 X 2 3 而不是 X 2 X
此外，Google Ad 和在其下方放置项目也是一项挑战。

标签： javascript html css responsive-design zurb-foundation

【解决方案1】：

看看 CSS 网格布局：https://css-tricks.com/snippets/css/complete-guide-grid/

.grid-container {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "item-1 item-2 item-3 item-4"
    "item-5 item-6 item-7 item-8"
    "item-9 item-10 item-11 item-12";
}

.item-1 {grid-area:item-1} /* For each item inside grid */

而且，当您想要更改网格外观时（例如在@media 查询中），只需覆盖.grid-container 的样式即可。

JSFiddle 与工作示例：https://jsfiddle.net/qd4np55L/

【讨论】：