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;
- }
grid - 显式网格的更多相关文章
- grid - 隐式网格
当网格项目确认在显式网格之外时就会创建隐性网格,当没有足够的空间或者显式的网格轨道来设置网格项目,此时网格项目就会自动创建隐式网格. 隐式网格可以定义:grid-auto-rows.grid-auto ...
- CSS3 网格布局(grid layout)基础知识 - 隐式网格自己主动布局(grid-auto-rows/grid-auto-columns/grid-auto-flow)
网格模板(grid-template)属性及其普通写法(longhands)定义了一个固定数量的轨道.构成显式网格. 当网格项目定位在这些界限之外.网格容器通过添加隐式网格线生成隐式网格轨道. 这些隐 ...
- grid - 隐式地命名网格区域名称
通常可以将网格线命名成任何你想命名的名称,如果网格线名称添加-start和-end的后缀,其实也隐式的创建一个网格区域,可以用来设置网格项目的位置. 在这个示例中,行和列都具有inner-start和 ...
- CoreAnimation4-隐式动画和显式动画
事务 Core Animation基于一个假设,说屏幕上的任何东西都可以(或者可能)做动画.动画并不需要你在Core Animation中手动打开,相反需要明确地关闭,否则他会一直存在. 当你改变CA ...
- iOS 动画基础-显式动画
摘要 显式动画 属性动画 CABasicAnimation *animation = [CABasicAnimation animation]; [self updateHandsAn ...
- 浅析SQL查询语句未显式指定排序方式,无法保证同样的查询每次排序结果都一致的原因
本文出处:http://www.cnblogs.com/wy123/p/6189100.html 标题有点拗口,来源于一个开发人员遇到的实际问题 先抛出问题:一个查询没有明确指定排序方式,那么,第二次 ...
- C++中的显式类型转化
类型转化也许大家并不陌生,int i; float j; j = (float)i; i = (int)j; 像这样的显式转化其实很常见,强制类型转换可能会丢失部分数据,所以如果不加(int)做强制转 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (28) ------ 第五章 加载实体和导航属性之测试实体是否加载与显式加载关联实体
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-11 测试实体引用或实体集合是否加载 问题 你想测试关联实体或实体集合是否已经 ...
- 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'OrderList' 中的标识列插入显式值
问题描述:在SQL SERVER 2008中,向数据表中字段插入数据时,会报错,错误如下: 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'OrderList' 中的标识列插入显式 ...
随机推荐
- spoj New Distinct Substrings
vjudge原地爆炸... 题意:求一个字符串不同的子串的个数 策略:后缀数组 利用后缀数组的sa和height两个功能强大的数组,我们可以实现上述操作 首先有个很显然的结论:一个字符串的所有子串=它 ...
- python 全栈开发,Day129(玩具开机提示语,为多个玩具发送点播,聊天界面,app录音,app与服务器端文件传输,简单的对话)
一.玩具开机提示语 先下载github代码,下面的操作,都是基于这个版本来的! https://github.com/987334176/Intelligent_toy/archive/v1.2.zi ...
- 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 ...
- 【BZOJ1786】[Ahoi2008]Pair 配对
题解: 打表出奇迹 能发现所有ai一定是不减的 其实很好证明啊.. 考虑两个位置x y(y在x右边) x的最优值已经知道了 考虑y处 先让y=x,然后开始变化 因为x处已经是最优的了,所以如果减小,那 ...
- Mistwald POJ
一开始看不出来是快速幂矩阵的题目 先要把整个地图离散化为1,2,3,4,.... 连成一个有向图 邻接矩阵的平方意为:假如a->b 且b->c 那么一次平方后 a->c ...
- 033 关于YARN的HA
一:准备 1.规划 namenode namenode ZKFC ZKFC journalnode journalnode jou ...
- VUE3.0升级与配置(跨域、全局scss变量等)
1.检查本机vue版本 vue -V 2.升级vue3.0命令 npm install -g @vue/cli 3.创建完项目后,在项目根目录新增vue.config.js文件,插入代码(简洁) mo ...
- Ubuntu18.10&Ubuntu18.04安装Python虚拟环境
Ubuntu18.04版本里面自带了最新的Python3.6.5版本,在安装Python虚拟环境时需注意: 1.首先是安装两个包 pip3 install virtualenv # python虚拟环 ...
- Get package name
public class GetPackageName { public static void main(String[] args) { GetPackageName obj = new GetP ...
- 论文笔记-Mining latent relations in peer-production environments
背景 用户合作产生内容的网站越来越多,有许多隐藏的信息可以去挖掘 wiki上保存了贡献者的编辑记录,提供了非常多的有用的信息 研究发现,大部分的贡献者仅仅会参与编辑很小数量的文章,修改的版本也有限制, ...