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

grid-template-columns

  1. page {
  2. color: #fff;
  3. }
  4.  
  5. .grid {
  6. padding:1%;
  7. display: grid;
  8. grid-gap: 1px;
  9. /* grid-template-rows: 50px 100px 50px; */
  10. grid-template-columns: 50px 150px 100px;
  11. }
  12.  
  13. .grid-row {
  14. text-align: center;
  15. background-color: #d94a6a;
  16. }

grid-template-rows

  1. page {
  2. color: #fff;
  3. }
  4.  
  5. .grid {
  6. padding:1%;
  7. display: grid;
  8. grid-gap: 1px;
  9. grid-template-rows: 50px 100px 50px;
  10. }
  11.  
  12. .grid-row {
  13. text-align: center;
  14. background-color: #d94a6a;
  15. }

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

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

  1. page {
  2. color: #fff;
  3. }
  4.  
  5. .grid {
  6. padding:1%;
  7. display: grid;
  8. grid-gap: 1px;
  9. /* grid-template-rows: 50px 100px 50px; */
  10. /* grid-template-columns: 50px 150px 100px; */
  11. grid-template-columns: 1fr 1fr 2fr;
  12. }
  13.  
  14. .grid-row {
  15. text-align: center;
  16. background-color: #d94a6a;
  17. }

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

网格宽度:默认100%

假设iphone6 => 375px,

  1. 1fr = (网格宽度 - 3rem - 网格宽度 * 25%) / 3
  1. <view class="grid">
  2. <view class='grid-row'>1</view>
  3. <view class='grid-row'>2</view>
  4. <view class='grid-row'>3</view>
  5. <view class='grid-row'>4</view>
  6. </view>
  1. page {
  2. color: #fff;
  3. font-size: 16px;
  4. }
  5.  
  6. .grid {
  7. /* padding: 1%; */
  8. display: grid;
  9. grid-gap: 1px;
  10. grid-template-columns: 3rem 25% 1fr 2fr;
  11. }
  12.  
  13. .grid-row {
  14. text-align: center;
  15. background-color: #d94a6a;
  16. }

grid - 显式网格的更多相关文章

  1. grid - 隐式网格

    当网格项目确认在显式网格之外时就会创建隐性网格,当没有足够的空间或者显式的网格轨道来设置网格项目,此时网格项目就会自动创建隐式网格. 隐式网格可以定义:grid-auto-rows.grid-auto ...

  2. CSS3 网格布局(grid layout)基础知识 - 隐式网格自己主动布局(grid-auto-rows/grid-auto-columns/grid-auto-flow)

    网格模板(grid-template)属性及其普通写法(longhands)定义了一个固定数量的轨道.构成显式网格. 当网格项目定位在这些界限之外.网格容器通过添加隐式网格线生成隐式网格轨道. 这些隐 ...

  3. grid - 隐式地命名网格区域名称

    通常可以将网格线命名成任何你想命名的名称,如果网格线名称添加-start和-end的后缀,其实也隐式的创建一个网格区域,可以用来设置网格项目的位置. 在这个示例中,行和列都具有inner-start和 ...

  4. CoreAnimation4-隐式动画和显式动画

    事务 Core Animation基于一个假设,说屏幕上的任何东西都可以(或者可能)做动画.动画并不需要你在Core Animation中手动打开,相反需要明确地关闭,否则他会一直存在. 当你改变CA ...

  5. iOS 动画基础-显式动画

    摘要 显式动画 属性动画 CABasicAnimation *animation = [CABasicAnimation animation];         [self updateHandsAn ...

  6. 浅析SQL查询语句未显式指定排序方式,无法保证同样的查询每次排序结果都一致的原因

    本文出处:http://www.cnblogs.com/wy123/p/6189100.html 标题有点拗口,来源于一个开发人员遇到的实际问题 先抛出问题:一个查询没有明确指定排序方式,那么,第二次 ...

  7. C++中的显式类型转化

    类型转化也许大家并不陌生,int i; float j; j = (float)i; i = (int)j; 像这样的显式转化其实很常见,强制类型转换可能会丢失部分数据,所以如果不加(int)做强制转 ...

  8. 《Entity Framework 6 Recipes》中文翻译系列 (28) ------ 第五章 加载实体和导航属性之测试实体是否加载与显式加载关联实体

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-11  测试实体引用或实体集合是否加载 问题 你想测试关联实体或实体集合是否已经 ...

  9. 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'OrderList' 中的标识列插入显式值

    问题描述:在SQL SERVER 2008中,向数据表中字段插入数据时,会报错,错误如下: 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'OrderList' 中的标识列插入显式 ...

随机推荐

  1. spoj New Distinct Substrings

    vjudge原地爆炸... 题意:求一个字符串不同的子串的个数 策略:后缀数组 利用后缀数组的sa和height两个功能强大的数组,我们可以实现上述操作 首先有个很显然的结论:一个字符串的所有子串=它 ...

  2. python 全栈开发,Day129(玩具开机提示语,为多个玩具发送点播,聊天界面,app录音,app与服务器端文件传输,简单的对话)

    一.玩具开机提示语 先下载github代码,下面的操作,都是基于这个版本来的! https://github.com/987334176/Intelligent_toy/archive/v1.2.zi ...

  3. hdu 1005 根据递推公式构造矩阵 ( 矩阵快速幂)

    f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1) + B * f(n - 2)) mod 7. Sample Input1 1 3 //a b n1 2 100 0 0 ...

  4. 【BZOJ1786】[Ahoi2008]Pair 配对

    题解: 打表出奇迹 能发现所有ai一定是不减的 其实很好证明啊.. 考虑两个位置x y(y在x右边) x的最优值已经知道了 考虑y处 先让y=x,然后开始变化 因为x处已经是最优的了,所以如果减小,那 ...

  5. Mistwald POJ

    一开始看不出来是快速幂矩阵的题目 先要把整个地图离散化为1,2,3,4,.... 连成一个有向图 邻接矩阵的平方意为:假如a->b  且b->c     那么一次平方后   a->c ...

  6. 033 关于YARN的HA

    一:准备 1.规划 namenode               namenode ZKFC ZKFC journalnode        journalnode               jou ...

  7. VUE3.0升级与配置(跨域、全局scss变量等)

    1.检查本机vue版本 vue -V 2.升级vue3.0命令 npm install -g @vue/cli 3.创建完项目后,在项目根目录新增vue.config.js文件,插入代码(简洁) mo ...

  8. Ubuntu18.10&Ubuntu18.04安装Python虚拟环境

    Ubuntu18.04版本里面自带了最新的Python3.6.5版本,在安装Python虚拟环境时需注意: 1.首先是安装两个包 pip3 install virtualenv # python虚拟环 ...

  9. Get package name

    public class GetPackageName { public static void main(String[] args) { GetPackageName obj = new GetP ...

  10. 论文笔记-Mining latent relations in peer-production environments

    背景 用户合作产生内容的网站越来越多,有许多隐藏的信息可以去挖掘 wiki上保存了贡献者的编辑记录,提供了非常多的有用的信息 研究发现,大部分的贡献者仅仅会参与编辑很小数量的文章,修改的版本也有限制, ...