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' 中的标识列插入显式 ...
随机推荐
- python 全栈开发,Day11(函数名应用,闭包,装饰器初识,带参数以及带返回值的装饰器)
一.函数名应用 函数名是什么?函数名是函数的名字,本质:变量,特殊的变量. 函数名(),执行此函数. python 规范写法 1. #后面加一个空格,再写内容,就没有波浪线了. 2.一行代码写完,下面 ...
- C# event关键字
直接使用委托的写法,如下: using System; namespace ConsoleAppTest { class Program { class Test { static void Main ...
- java算法:统计数字-将数字转换成字符串,然后使用字符串String.valueOf()方法进行判断
题目: 计算数字 k 在 0 到 n 中的出现的次数,k 可能是 0~9 的一个值. 样例 样例 1: 输入: k = 1, n = 1 输出: 1 解释: 在 [0, 1] 中,我们发现 1 出现了 ...
- Python subprocess方法
import subprocess #subprocess.call("df -h",shell=True,stdout=subprocess.PIPE)#打印到视图,但是不能保存 ...
- 手动部署 kubernetes 1.9 记录
前言 目前 kubernetes 正式版本已经到1.10版本.因为前面有大佬(漠然)已经采完坑,所以自己也试着部署 kubernetes 1.9 体验下该版本的新特性.对于前面部署的 kubernet ...
- Einbahnstrasse HDU2923
基础2923题 处理输入很麻烦 有可能一个城市有多辆破车要拖 应该严谨一点的 考虑所有情况 #include<bits/stdc++.h> using namespace std; ] ...
- 算法竞赛入门经典-训练指南(10881-Piotr's Ants)
题目大意: 一根长度为L的木棍一堆蚂蚁爬,向左或向右,速度都为1,若两蚂蚁碰撞则同时转头(转身时间忽略不计),问T时间之后每只蚂蚁的位置: 输入:t,(t个样例),每个样例输入 L,T,n,接下来是n ...
- 在phpstorm中svn的使用
目 录 1.搭建svn环境 1.1搭建svn服务端 1.2创建svn用户和密码 2.开始在phpstorm中链接svn 2.1打开Subversion 2.2 输入svn地址 2.3选择导出文件,进 ...
- python使用 requirements.txt 管理所需的包
使用 requirements.txt 管理所需的包 2019/01/28 作者 若要与其他人共享项目.使用生成系统,或打算将项目复制到需要在其中还原环境的其他任何位置,必须指定项目需要的外部包. 建 ...
- Linux学习之常用权限管理命令(二)
(一)常用权限管理命令 (1)chmod命令 (2)chown (3)chgrp (4)umask (一)常用权限管理命令 (1)chmod命令 命令名称:chmod命令英文原意:change the ...