html - 创建一个自动缩放的固定单元格大小的网格

Question

我想在我的网站上创建一个库存视图。基本上它应该是这样的：

请注意，网格的宽度（元素的倍数）始终根据设备的屏幕尺寸进行调整。此外，网格容器应始终自动适应所选网格宽度的宽度。
我尝试使用 css-grid 来做到这一点，尽管我不知道如何让 css-grid 根据屏幕大小自动确定列数。

然后我尝试简单地为每个图像设置一个固定大小，让 HTML 自然分页符处理它：

这确实有效，但是在左侧尺寸上您可以清楚地看到网格容器边距大于右侧，因为浏览器没有根据最佳列号调整容器。下面是关于我是如何做到的代码（做出反应，但这对于这个问题并不重要）：

  render() {
    const gridCSS = {
        display:"block",
    }

    var x=Array.from(Array(99).keys())
    return (
        <div style={gridCSS}>
        
        
            {x.map((a)=> (
                    <img src="//placekitten.com/80/80" style={{border:" 2pt inset #0ff"}}/>
                )
            )
            }
        
        </div>
    );
  }
}

有没有比这更好的方法来创建具有固定大小的 elmenets 的库存视图？如果没有，我如何调整网格容器以始终适合最接近的元素倍数？

标签： htmlcssgridviewdatagridinventory-management

Answer 1

你需要display: grid，它为你的解决方案提供了问题。

我添加了grid-template-columns: repeat(auto-fill, 80px)，因此它会根据视口的宽度创建宽度为 80 像素的列。重复函数的第二个参数不能是1fr! 如果您将其指定为1fr或任何其他 fr 值，它将不起作用。这里可以使用rem、%、em等来代替px。但是你不能在这里使用 fr 单位，因为它不会给你想要的结果。

grid-auto-rows: 80px这个属性确保，每当为网格创建一个新的时，它的高度总是 80px。因此，无论浏览器自动生成多少行，它们的高度始终为 80px。 grid-gap: 10px，这个属性确保我们10px在每个网格项之间保持一个间隙。

然后是使网格项跨越网格中心的主要属性，justify-content: center. 此属性在水平轴上对齐整个网格。

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 80px);
    grid-auto-rows: 80px;
    grid-gap: 10px;
    justify-content: center;
}

<div class="grid">
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
    <div class="grid-item"><img src="//placekitten.com/80/80"/></div>
</div>

这是 css-grid 的工作示例： https ://codepen.io/prathameshkoshti/pen/XWKOGeM