grid - 显式网格

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

 

列

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

.grid {
  /* padding: 1%; */
  display: grid;
  grid-gap: 1px;
  grid-template-columns: 3rem 25% 1fr 2fr;
}

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