----关于grid----
HTML部分:
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
CSS部分:
.wrapper {
display: grid;
/*display 属性规定元素应该生成的框的类型*/
grid-template-columns: repeat(3, 1fr);
/*设置网格为3列;
fr 单位是一个自适应单位,fr单位被用于在一系列长度值中分配剩余空间,
如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配;
repeat为重复片段,允许重复大量 列 的片段*/
grid-gap: 10px;
/*设置网格间隙为10像素*/
grid-auto-rows: minmax(100px, auto);
/*定义了最小值为100像素,最大值设为自动*/
}
.one {
grid-column: 1 / 3;
/*占用列的位置,从第一到第三列*/
grid-row: 1;
/*占用行的位置*/
opacity:0.6;
/*设置透明度方便观察*/
background: #408353;
/*设置背景色便于观察*/
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
/*占用行的位置,从第一到第三行*/
opacity:0.6;
background: #543634;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
opacity:0.6;
background: #634653;
}
.four {
grid-column: 3;
grid-row: 3;
opacity:0.6;
background: #744143;
}
.five {
grid-column: 2;
grid-row: 4;
opacity:0.6;
background: #624642;
}
.six {
grid-column: 3;
grid-row: 4;
opacity:0.6;
background: #532535;
}
以上grid的代码部分,运行效果如图:
其网格宽度随着网页宽度而变化,占据满整个网页宽度
------------------2018.12.29补充-----------------
在grid中可以使用grid-area / grid-column+grid-row 来对div盒子进行定位
----关于grid----的更多相关文章
- ExtJS 4.2 Grid组件的单元格合并
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...
- WPF中Grid实现网格,表格样式通用类
/// <summary> /// 给Grid添加边框线 /// </summary> /// <param name="grid"></ ...
- 在 Windows Phone 中,为 Grid 添加 Tilt 效果
在 Windows Phone 中,Tilt 效果是比较经典的效果,我们可以很简单的为按钮等控件添加这样的效果(使用 Windows Phone Toolkit 的Tilt 效果),但是,如果我们想要 ...
- wpf 列表、菜单 收起与展开,通过Grid DoubleAnimation或者Expander实现
菜单收缩有很多种方法具体如何实现还是看个人想法: 第一种通过后台控制收起与展开: 效果图: 代码 : <Grid> <Grid.ColumnDefinitions> <C ...
- Sencha ExtJS 6 Widget Grid 入门
最近由于业务需要,研究了一下Sencha ExtJS 6 ,虽然UI和性能上据相关资料说都有提升,但是用起来确实不太顺手,而且用Sencha cmd工具进行测试和发布,很多内部细节都是隐藏的,出了问题 ...
- WPF CheckBox样式 ScrollViewer样式 WrapPanel、StackPanel、Grid布局
本节讲述布局,顺带加点样式给大家看看~单纯学布局,肯定是枯燥的~哈哈 那如上界面,该如何设计呢? 1.一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等.如上这种 ...
- [转]ExtJS Grid 分页时保持选中的简单实现方法
原文地址 :http://www.qeefee.com/article/ext-grid-keep-paging-selection ExtJS中经常要用到分页和选择,但是当选择遇到分页的时候,杯具就 ...
- [转]extjs grid的Ext.grid.CheckboxSelectionModel默认选中解决方法
原文地址:http://379548695.iteye.com/blog/1167234 grid的复选框定义如下: var sm = new Ext.grid.CheckboxSelection ...
- EXTJS中grid的数据特殊显示,不同窗口的数据传递
//EXTJS中grid的数据特殊显示renderer : function(value, metaData, record, rowIndex, colIndex, store, view) { v ...
- selenium 测试框架中使用grid
之前的测试框架:http://www.cnblogs.com/tobecrazy/p/4553444.html 配合Jenkins可持续集成:http://www.cnblogs.com/tobecr ...
随机推荐
- 将Long类型转为字母数字组合的jar包---Hashids
在设计数据库时,我有时喜欢使用自增Id,而不是uuid,但是在面对终端用户时,直接暴露id不是一个好的行为. 经过查询,可以使用 Hashids 这个jar包将id转为类似YouTube的大小写字母和 ...
- FastCGI点滴
FastCGI是一种二进制协议,用于将交互式程序与Web服务器连接.它是早期通用网关接口(CGI)的变体.FastCGI的主要目标是减少与Web服务器和CGI程序之间的接口相关的开销,允许服务器每单位 ...
- MySQL导出数据字典
平时用mysql比较多,有时候需要详细的数据库设计表结构和数据字典,但又没有最新的文档,这个时候直接从数据导出是最新最全的.在MySQL数据库中利用information_schema库中的COLUM ...
- JAVA 没有重载运算符,那么 String 类型的加法是怎么实现的,以及String类型不可变的原因和好处
1, JAVA 不具备 C++ 和 C# 一样的重载运算符 来实现类与类之间相互计算 的功能 这其实一定程度上让编程失去了代码的灵活性, 但是个人认为,这在一定程度上减少了代码异常的概率 ...
- JRebel 代理激活
1.生成GUID https://www.guidgen.com/ 例:04cfff79-8f45-481c-a858-a5b9590422e7 2.License Server 例: http: ...
- byobu 禁止窗口名称随目录变化
It looks like the config set-window-option -g automatic-rename off doesn't work. When I added the fo ...
- 尚硅谷springboot学习25-嵌入式Servlet容器
SpringBoot默认使用Tomcat作为嵌入式的Servlet容器:
- 深度学习VS机器学习——到底什么区别
转自:https://baijiahao.baidu.com/s?id=1595509949786067084&wfr=spider&for=pc 最近在听深度学习的课,老师提了一个基 ...
- [C语言]进阶|链表
--------------------------------------------------------------------------------------- 可变数组: array. ...
- 使用jQuery+huandlebars遍历中if判断
兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...