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

佚名 6年前 (2019-04-08) 随笔 1794人围观抢沙发百度已收录

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

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

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: 14px;
} .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;
}