css grid 随笔
原文出自Arien的博客https://www.w3cplus.com/css3/line-base-placement-layout.html
首先定义一个网格
1.可以给父容器的display
属性设置为grid
或者inline-grid
来定义一个网格。这样你就可以使用grid-template-columns
和grid-template-rows
属性来创建一个网格。
.wrapper { display: grid; grid-template-columns: 100px 10px 100px 10px 100px; grid-template-rows: auto 10px auto; }
指定了列宽、列间距,行高和行间距等。
2.网格线的简写方式,其实就是grid-column
和grid-row
的start
与end
值合并在一起,两者之间用/
来分隔。
.a{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }
可简写为
.a{ grid-column: 1 / 2; grid-row: 1 / 2; }
3.在CSS Grid Layout中有一个关键东东,网格区域grid-area
。
网格区域他是由四条网格线组成的一个空间。
组成网格区域的网格线顺序是row-start/column-start/row-end/column-end
。每个网格线之间也是使用/
来分隔。
.a{ grid-area: 1 / 1 / 2 / 2; }
自定义网格线名称
CSS Grid Layout模块中还提供了自定义网格线名称,然后使用定义好的名称来制作网格布局。
.wrapper { display: grid; grid-template-columns: (col1-start) 100px (col1-end) 10px (col2-start) 100px (col2-end) 10px (col3-start) 100px (col3-end); }
.a{ grid-column: col1-start / col3-end; grid-row: row1-start; }
自定义网格线配合关键词span
合并单元格
上面那种自定义网各线的方法好是好,但也有一个问题,如果网格线少,还是蛮方便的,不过网格一多,网格线也多起来,每条网格线都定义名称是不是太费时费力了。
其实在CSS Grid Layout中不需要这么做,你完全可以给网格线定义相同的名称,然后使用关键词span
添加到特定的目标网格线。这种方法对于创建一些复杂的网格(包括多个网格与列间距)是非常方便的。
在实际使用中,可以在网格内容轨道前的网格线都定义为col
,而在列间距轨道前的网格线都定义为gutter
。
在调用时,可以使用col <line number>
来指定开始的网格线,配合关键词span <number of lines of that name>
来指写网格的跨度。
.wrapper { display: grid; grid-template-columns: (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter); grid-template-rows: (row) auto (gutter) 10px (row) auto (gutter) 10px (row) auto (gutter) 10px (row) auto; }
.a{ grid-column: col / span gutter 2; grid-row: row; } .b { grid-column: col 3 / span gutter 2; grid-row: row; }
repeat
关键词
在上例中,不难发现列和行都有很多重复的,比如:列网格线有六个(col) 100px (gutter) 10px
,而行网格线有四个(row) auto (gutter) 10px
。其实在CSS Grid Layout没有必要这么痛苦,他提供了一个关键repeat
,完全可以使用repeat
来让你的代码变得更简洁。
使用repeat
的代码如下:
.wrapper {
display: grid;
grid-template-columns:repeat(6, (col) 100px (gutter) 10px);
grid-template-rows: repeat(4, (row) auto (gutter) 10px );
}
最新文章
- 如何利用ansible callback插件对执行结果进行解析
- ArtifactTransferException: Failure to transfer org.apache.openejb:javaee-api:jar:5.0-1
- 怎么修改与设置.java文件属性?
- Can&#39;t find any matching row in the user table
- maven pom中的repository节点配置没有起作用
- NEC学习 ---- 模块 - tab[含标题]
- csharp:Chart
- Jquery 右键菜单(ContextMenu)插件使用记录
- C# 二分查询
- git 命令参考手册 git中文命令参考手册大全
- 如何迅速成为Java高手
- 数据契约(DataContract)的作用
- mysql中的一些操作语句,留存
- Tomcat启动报错java.lang.UnsatisfiedLinkError
- python中的判断语句与循环语句
- C++实验1
- kafka 客户端 producer 配置参数
- jenkins 构建完毕后接着构建另外一个构建的方法
- python os module
- 每天CSS学习之direction
热门文章
- 【转帖】超能课堂(188) WiFi 6凭什么可以如此“六”?
- Spring(十二)--Spring AspectJ
- reids集群状态正常redis.clients.jedis.exceptions.JedisNoReachableClusterNodeException: No reachable node in cluster
- 自动生成ID
- TCP/IP 协议是如何保证数据可靠性的?
- C语言经典100例(51-100)
- Spring配置redis及使用
- vue运行碰到的问题
- Mac下的Web性能压力测试工具:ab(ApacheBench)
- CXF实现webService服务(一)