[英]How to fix the position of div's in responsive UI
我必须在网格中显示内容。 所有项目都是具有随机高度的div,我需要控制它们的显示方式。 它是具有4列,3列和1列的响应式UI。 假设X在javascript数组中可用,而G在google广告中可用。
我可以在基础中使用任何类来实现此目的。 还是我需要根据分辨率动态生成网格。
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网格布局: 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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.