grid布局中网格被拉伸的问题

其实所有的元素被拉伸的问题都可以归咎于宽高的不确定。

.content {
				display: grid;
				gap: 15rpx;
				grid-template-columns: repeat(3, 1fr);
			}

这种布局中出现了第一和第二列被挤压，第三列被拉宽的问题。

经过排查发现是第三个元素的图片未设置宽高，设置宽高之后能够正常三列等宽显示。

那么有没有办法在不方便设置元素宽高的情况下也可以解决这个显示异常的情况呢？

直接写死宽度是一种方法：

.content {
				grid-template-columns: 200px 200px 200px;
			}

但这种情况我们用的比较少，更多时候还是希望布局可以自适应宽度。

.content {
				grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
				// 或者
				grid-template-columns: repeat(3, minmax(0, 1fr));
				// 或者
				grid-template-columns: repeat(3, 33%);
			}

原理仍然是写定了宽度，但只是设定最小和最大值，相当于设定了一定的元素可拉伸的宽高范围。
33%的限制在于有padding或者gap之类占用宽高的属性时可能会溢出container。