css minmax

作者：饮尽孤单发布日期:2026-03-30 浏览:45

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 10px;
}

.grid-item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

解释说明：

minmax(100px, 1fr)：定义了一个列宽的范围，最小宽度为 100px，最大宽度为 1fr（即剩余空间的比例）。
repeat(3, minmax(100px, 1fr))：创建了三列，每一列的宽度都遵循 minmax(100px, 1fr) 的规则。
gap: 10px：设置了网格项之间的间距为 10px。

这个示例展示了如何使用 minmax() 函数来创建一个响应式的网格布局。

上一篇：css样式前面加个圆点

下一篇：css 第一个