grid - 显式网格

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

显式网格布局包含：行、列

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

列

grid-template-columns

page { color: #fff;
} .grid { padding:1%; display: grid; grid-gap: 1px;
  /* grid-template-rows: 50px 100px 50px; */ grid-template-columns: 50px 150px 100px;
} .grid-row { text-align: center; background-color: #d94a6a;
}

行

grid-template-rows

page { color: #fff;
} .grid { padding:1%; display: grid; grid-gap: 1px; grid-template-rows: 50px 100px 50px;
} .grid-row { text-align: center; background-color: #d94a6a;
}

以上行、列网格可以搭配使用！如果未定义grid-template-columns或grid-template-rows，则宽高根据自身内容.

也可以采用等份计算单位"fr" (一旦采用fr，就会自动计算填充宽度)

page { color: #fff;
} .grid { padding:1%; display: grid; grid-gap: 1px;
  /* grid-template-rows: 50px 100px 50px; */
  /* grid-template-columns: 50px 150px 100px; */ grid-template-columns: 1fr 1fr 2fr;
} .grid-row { text-align: center; background-color: #d94a6a;
}

计算单位也可以不同，它会自动进行混合运算

网格宽度：默认100%

假设iphone6 => 375px,

1fr = (网格宽度 - 3rem - 网格宽度 * 25%) / 3

<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-columns: 3rem 25% 1fr 2fr;
}

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