Question

我正在尝试渲染具有未知项目数（生成JavaScript）的动态（css）网格。

我需要的是使所有项目（显然已调整大小）的宽度为100％，高度为100％。

示例：

1个项目：大方块
2个项目：2个大方块（2个水平列）
3个项目：屏幕以4格，1、2、3格，4（最后一个）为空
4个项目：4个正方形的屏幕
依此类推...
1920个项目（在1920x1080显示器上）：每个项目的大小都非常小（考虑到它们之间的间隙，可能只有一个像素或更小）（内部没有文本），具有相同的列和行数（但这只是一个极端的例子），仅出于含义！）

我一个人做的事：https://jsfiddle.net/fredhors/s4k3z9t2/8/

CSS ：

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, 10vmax);
  grid-gap: 0.5rem;
  height: 100vh;
}

.grid-item {
  background: red;
}

Answer 1

错误出在def get_keywords(func): """Return a dict of (reversed) keyword arguments from a function.""" spec = inspect.getfullargspec(func) keys = reversed(spec.args) values = reversed(spec.defaults) return {k: v for k, v in zip(keys, values)} get_keywords(f) # {'c': '1', 'b': 1}中：我使用grid-template-columns: repeat();列宽为9％，以便所有十列都显示在页面上，而minmax则将剩余空间分配给排水沟。

1fr

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9%, 1fr));
  grid-gap: 0.5rem;
  height: 100vh;
}

.grid-item {
  background: red;
}

无论大小，它都能做到！ ;）

CSS（网格），自动调整未知数量的项目，行和列的大小，高度和宽度为100％

1 个答案: