Question

我必须在网格中显示内容。所有项目都是具有随机高度的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

Answer 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/

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

1 个答案: