CSS怎么定义一个网格
这篇文章主要介绍了 CSS怎么定义一个网格的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇 CSS怎么定义一个网格文章都会有所收获,下面我们一起来看看吧。
成都创新互联主营海棠网站建设的网络公司,主营网站建设方案,成都App定制开发,海棠h5微信平台小程序开发搭建,海棠网站营销推广欢迎海棠等地区企业咨询
定义一个网格
可以给父容器的display
属性设置为grid
或者inline-grid
来定义一个网格。这样你就可以使用grid-template-columns
和grid-template-rows
属性来创建一个网格。
在这个示例中,创建了一个三列网格,其中三个列的列宽是100px
,并且指定列与列之间的间距为10px
。同时网格具有三行,每行的高度是自动的,另外行与行之间的间距是10px
。简单点说就是一个三行三列的网格,并且列与列之间,行与行之间的间距都是10px
。
此时浏览器将容器中的子元素自动填入到每个网格单元格中,当超过指定的列数时,网格会自动换行。
看看代码是怎么完成的:
HTML
复制代码
代码如下:
CSS
复制代码
代码如下:
body {
padding: 50px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto;
}
.box {
background-color: #444;
color: #fff;
font-size: 150%;
padding: 20px;
}
.b,.d,.g,.i {
background-color:red;
}
定义网格的关键代码:
复制代码
代码如下:
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto;
}
在线案例
从示例效果中可以看出,.wrapper
容器通过display:grid;
定义成网格,并且使用grid-template-columns:100px 10px 100px 10px 100px;
和grid-template-rows:auto 10px auto;
指定了列宽、列间距,行高和行间距等。对应的子元素.a
、.c
、.e
、.f
、.h
和.j
列宽度为100px
(也就是黑色区域),而.b
、.d
、.g
和.i
是列与列的间距10px
(也就是红色区域)。而且当子元素在一行填不下时,就会自动换行,如.f
~.j
自动换到第二行显示。
基于网格线的占位区
网格中的单元格是有网格线划分出来的,那么在网格布局中,同样可以使用网格线来给子元素设置占位区域。基于上例,在容器.wrapper
下面有十个子元素.a
~.j
,接下来看如何通过基于网格线来实现各种在网格布局中的区域。
对于网格线,在网格布局中有两种,一种是列线,另一种是行线。对应的个网格单元格都有列线起始线(grid-column-start
)、列线终止线(grid-column-end
)和行线起始线(grid-row-start
)、行线终止线(grid-row-end
)。
如上图所示,紫色的是列网格线,而蓝色的是行网格线,其中高亮大红的那个单元格列起始线是line3
,列终止线是line4
,行起始线是line3
,行终止线是line4
。也就是说这四条网格线间的区域是一个单元格。
接下来,看一个示例,如何用网格线实现单元格占位区域:
HTML
复制代码
代码如下:
CSS
复制代码
代码如下:
body {
padding: 50px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto 10px auto;
}
.box {
background-color: #444;
color: #fff;
font-size: 150%;
padding: 20px;
text-align: center;
}
.a{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.b {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.c {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
}
.d {
grid-column-start: 7;
grid-column-end: 8;
grid-row-start: 1;
grid-row-end: 2;
}
.e {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
.f {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
.g {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4;
}
.h {
grid-column-start: 7;
grid-column-end: 8;
grid-row-start: 3;
grid-row-end: 4;
}
.i {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 5;
grid-row-end: 6;
}
.j {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
}
在线案例
这种方式可以让你的子元素.a
~.b
定位在任何位置,比如说,你现在想要.a
和.f
对换,那么很简单就能实现:
复制代码
代码如下:
.a{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background:red;
}
.f {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
background:orange;
}
网格线简写
前面两个示例向大家演示了如何用网格线实现布局,可以说是简单方便,唯一就是写代码麻烦,要什么grid-column-start
、grid-column-end
等等。其实有一种简写方式,可以让你不再痛苦。
网格线的简写方式,其实就是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;
}
这样一来,上例的代码,我们就可以换成简写方式:
复制代码
代码如下:
.a{
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.b {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.c {
grid-column: 5 / 6;
grid-row: 1 / 2;
}
.d {
grid-column: 7 / 8;
grid-row: 1 / 2;
}
.e {
grid-column: 1 / 2;
grid-row: 3 / 4;
}
.f {
grid-column: 3 / 4;
grid-row: 3 / 4;
}
.g {
grid-column: 5 / 6;
grid-row: 3 / 4;
}
.h {
grid-column: 7 / 8;
grid-row: 3 / 4;
}
.i {
grid-column: 1 / 2;
grid-row: 5 / 6;
}
.j {
grid-column: 3 / 4;
grid-row: 5 / 6;
}
在CSS Grid Layout中有一个关键东东,网格区域grid-area
。网格区域他是由四条网格线组成的一个空间,简单点说,一个网格单元格也是一个网格区域(因为他也是有四条网格线组成的一个空间),多个单元格合并在一起也是一个网格区域。这样一来,要实现上例的效果,还可以使用网格区域grid-area
来完成。
在具体做案例之前,先简单的了解,网格区域是由哪几条网格线组成。组成网格区域的网格线顺序是row-start/column-start/row-end/column-end
。每个网格线之间也是使用/
来分隔。
接下来将上例使用网格区域改造一下,改造之后的样式代码如下:
复制代码
代码如下:
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto 10px auto;
}
.a{
grid-area: 1 / 1 / 2 / 2;
}
.b {
grid-area: 1 / 3 / 2 /4;
}
.c {
grid-area: 1 / 5 / 2 / 6;
}
.d {
grid-area: 1 / 7 / 2 / 8;
}
.e {
grid-area: 3 / 1 / 4 / 2;
}
.f {
grid-area: 3 / 3 / 4 / 4;
}
.g {
grid-area: 3 / 5 / 4 / 6;
}
.h {
grid-area: 3 / 7 / 4 / 8;
}
.i {
grid-area: 5 / 1 / 6 / 2;
}
.j {
grid-area: 5 / 3 / 6 / 4;
}
关于“ CSS怎么定义一个网格”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“ CSS怎么定义一个网格”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。
标题名称:CSS怎么定义一个网格
本文网址:http://myzitong.com/article/jjsosg.html