时间戳

首页 > 解决方案 > 如何创建具有动态变化的列宽的网格布局？

javascript - 如何创建具有动态变化的列宽的网格布局？

问题描述

我想为具有相同行高但不同列宽的图像库创建一个动态变化的网格布局。无论添加的项目数量如何，我都希望一个模式不断重复（图像将来自 JS 数组，而 HTML 将由带有变量的模板文字生成）。

这是JS：

let imgArray = ["img/img-1.jpg", "img/img-2.jpg", "img/img-3.jpg", "img/img-4.jpg", "img/img-5.jpg", "img/img-6.jpg", "img/img-7.jpg"
];

let galleryContainer = document.querySelector(".gallery-container");
 
galleryContainer.innerHTML += `${imgArray.map(img => `
<img src="${img}" alt="gallery-img" />`).join("")}
`;

所以我想要每行有两个不同宽度的网格列，如下所示：

40% 60%

60% 40%

40% 60%

等等

我怎样才能做到这一点？它必须是 grid-auto-columns、nth-child 和 grid-column。预先感谢您的帮助。

标签： javascriptcsscss-grid

解决方案

这是一个工作示例：https ://codepen.io/xgme/pen/wvegQVW

用户界面

<ul class="mytable">
   <li><div></div><div></div></li>
   <li><div></div><div></div></li>
   <li><div></div><div></div></li>
   <li><div></div><div></div></li>
   <li><div></div><div></div></li>
</ul>

CSS：

.mytable {
  width: 500px;
}
.mytable li {
  height: 20px;
  list-style:none;
  width: 100%;
}
.mytable li div {
  height:100%;
  float: left;
}
.mytable li:nth-child(even) div:nth-child(even) {
  width: 60%;
  background: blue;
}
.mytable li:nth-child(even) div:nth-child(odd) {
  width: 40%;
  background: green;
}
.mytable li:nth-child(odd) div:nth-child(even) {
  width: 40%;
  background: yellow;
}
.mytable li:nth-child(odd) div:nth-child(odd) {
  width: 60%;
  background: red;
}

推荐阅读