grid - 网格轨道最小和最大尺寸

可以通过minmax()函数来创建网格轨道的最小或最大尺寸。

 

minmax()函数接受两个参数：

第一个参数定义网格轨道的最小值

第二个参数定义网格轨道的最大值

 

可以接受任何长度值，也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压。

在这个示例中，第一行的高度最小值是100px，但其最大值为auto，允许行高可以变大超过100px。

第一列设置了最小值为auto，但它的最大值是50%，也就是列的最大宽度不会超过网格容器宽度的50%

 

<view class="grid">
  <view class='grid-row'>1</view>
  <view class='grid-row'>2</view>
  <view class='grid-row'>3</view>
  <view class='grid-row'>4</view>
</view>

page {
  color: #fff;
  font-size: 16px;
}

.grid {
  /* padding: 1%; */
  display: grid;
  grid-gap: 1px;
  grid-template-rows: minmax(100px, auto);
  /* grid-template-columns: minmax(auto, 50%) 1fr 3em; */
}

.grid-row {
  text-align: center;
  background-color: #d94a6a;
}