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

隐式网格可以定义:grid-auto-rowsgrid-auto-columnsgrid-auto-flow属性

1.在这个例子中我们只定义了一行(轨道),所以item1item2的高都是70px

第二行(轨道)自动创建了item3item4空间。grid-auto-rows定义隐式网格中的行(轨道)的大小,因此item3item4的高度是140px

 <view class="grid">
<view class='item1'>1</view>
<view class='item'>2</view>
<view class='item'>3</view>
<view class='item'>4</view>
<!-- <view class='item'>5</view>
<view class='item'>6</view>
<view class='item'>7</view>
<view class='item'>8</view>
<view class='item'>9</view> -->
</view>
 page {
color: #fff;
font-size: 16px;
} .grid {
/* padding: 1%; */
display: grid;
grid-gap: 1px;
line-height: 100px;
grid-template-rows: 70px;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 140px;
} .item1 { } .item {
text-align: center;
background-color: #d94a6a;
} .item1 {
text-align: center;
/* line-height: 300px; */
background-color: #1aa034;
}

2.更改默认流方向(默认row)

grid-auto-flow: column;
 <view class="grid">
<view class='item1'>1</view>
<view class='item'>2</view>
<view class='item'>3</view>
<view class='item'>4</view>
<!-- <view class='item'>5</view>
<view class='item'>6</view>
<view class='item'>7</view>
<view class='item'>8</view>
<view class='item'>9</view> -->
</view>
 page {
color: #fff;
font-size: 16px;
} .grid {
/* padding: 1%; */
display: grid;
grid-gap: 1px;
line-height: 100px;
grid-template-rows: 70px;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 140px;
grid-auto-flow: column;
} .item1 { } .item {
text-align: center;
background-color: #d94a6a;
} .item1 {
text-align: center;
/* line-height: 300px; */
background-color: #1aa034;
}

 row

 column

3.在这个例子中,我们只定义了前两列的轨道尺寸。item1的尺寸是30pxitem2的尺寸是60px

 page {
color: #fff;
font-size: 16px;
} .grid {
/* padding: 1%; */
display: grid;
grid-gap: 1px;
line-height: 100px;
grid-template-columns: 30px 60px;
grid-auto-flow: column;
grid-auto-columns: 1fr;
} .item1 {
} .item {
text-align: center;
background-color: #d94a6a;
} .item1 {
text-align: center;
/* line-height: 300px; */
background-color: #1aa034;
}

使用grid-auto-flow:column自动创建了隐式网格,用来放置item3item4item5,并且这三个列(轨道)的尺寸由grid-auto-columns来定义

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

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

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

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

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

  3. grid - 隐式命名网格线名称

    1.隐式的指定网格线反向指定了隐式的网格区域名称,命名的网格区域隐式的命名了网格线名称. 指定网格区域会给网格区域边线添加隐式的网格线名称.这些网格线的命名是基于网格区域来命名,只是在网格区域名称的后 ...

  4. grid - 显式网格

    显式网格布局包含:行.列 列 grid-template-columns page { color: #fff; } .grid { padding:1%; display: grid; grid-g ...

  5. Matlab:显(隐)式Euler和Richardson外推法变步长求解刚性问题

    一.显示Euler 函数文件:Euler.m function f=Euler(h,Y) f(1,1)=Y(1)+h*(0.01-(1+(Y(1)+1000)*(Y(1)+1))*(0.01+Y(1) ...

  6. SQL Server中提前找到隐式转换提升性能的办法

        http://www.cnblogs.com/shanksgao/p/4254942.html 高兄这篇文章很好的谈论了由于数据隐式转换造成执行计划不准确,从而造成了死锁.那如果在事情出现之前 ...

  7. js条件判断时隐式类型转换

    Javascript 中,数字 0 为假,非0 均为真 在条件判断运算 == 中的转换规则是这样的: 如果比较的两者中有布尔值(Boolean),会把 Boolean 先转换为对应的 Number,即 ...

  8. 非RootLayer的隐式动画

    非RootLayer都有隐式动画,默认0.25秒. // 1.开启 [CATransaction begin]; // 2.设置关闭 YES-关闭:NO-开启 [CATransaction setDi ...

  9. C#接口的显示和隐式实现

    早上骑车上班走到半路发现手机忘带了,这年代兜里没装一分现金,吃饭都要刷手机,上班时间无聊了不能玩手机更是大问题,所以果断掉头拿手机.取完手机刚出门看这天阴沉沉的貌似要下雨,没雨衣,骑车又不能打伞,上次 ...

随机推荐

  1. 数据库构架设计中的Shared Everthting、Shared Nothing、和Shared Disk

    Shared Everthting:一般是针对单个主机,完全透明共享CPU/MEMORY/IO,并行处理能力是最差的,典型的代表SQLServer Shared Disk:各个处理单元使用自己的私有 ...

  2. day75 form 组件(对form表单进行输入值校验的一种方式)

    我们的组件是什么呢 select distinct(id,title,price) from book ORM: model.py class Book(): title=model.CharFiel ...

  3. Python 2 和 3 的区别记录

    Python 2 和 3 的区别记录 print 2:关键字,可以 print a,也可以 print(a) 3:内置函数,必须带(),print(a) reload() 2:内置函数,可以直接使用 ...

  4. Java集合—Set集和Map集

    一.Set集合 1.概述 Set集合无序的.不可重复的元素(无序是指索引) Set集合不按照特定的方法进行排序,只是将元素放在集合中. 下面介绍一下Set集合的HashSet和TreeSet两个实现类 ...

  5. Codeforces 633C Spy Syndrome 2 【Trie树】+【DFS】

    <题目链接> 题目大意:给定一个只有小写字母组成的目标串和m个模式串(里面可能有大写字母),记目标串反过来后的串为S,让你从m个模式串中选出若干个组成S串(不区分大小写).输出任意一种方案 ...

  6. CVE-2011-0762环境搭建与EXP利用

    CVE-2011-0762 vsftpd拒绝服务漏洞 危害:通过发送特殊构造的数据包.利用漏洞使应用程序崩溃 条件:连接上vsftpd才能发包 发现时间:2011-03-01 需求:找到EXP运行发送 ...

  7. 【ACM】 1231 最大连续子序列

    [1231 最大连续子序列 ** Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...

  8. SpringMVC的请求处理流程

  9. Ubuntu16.04安装使用wineqq

    目前稳定的wineqq版本为qq2012,官方下载地址->这里 此版本有以下优点: 1.传送文件无问题. 2.支持密码键盘输入并记住密码. 3.可以发送QQ表情无问题. 4.QQ设置常用功能,比 ...

  10. [P3385]【模板】负环 (spfa / bellman-ford)

    终于开始认真对待图论了 因为听说一直是提高组的,动得很少,直到现在机房打提高的氛围下,开始学一些皮毛的东西 模板题目链接 这是一道求负环的题目,照理来说大家都是用spfa来判断负环的 但是我觉得bel ...