CSS Grid合理布局实例教程之网格模块格合理布局

日期:2021-03-06 类型:科技新闻 

关键词:小游戏源代码,互动小游戏微信,自制小游戏,html5游戏,制作游戏大概多少钱

CSS Grid合理布局针对我等来讲便是1个全新升级的合理布局,但海外许多同行业盆友已对这类合理布局做了全面的探知。前面花了两篇內容(《CSS Grid合理布局实例教程之甚么是网格合理布局》和《CSS Grid合理布局实例教程之访问器打开CSS Grid Layout汇总》)为这篇文章内容做足了铺垫。也许你想了解的是怎样应用?各位看官无需太急,接下来根据各种各样案例向大伙儿论述CSS Grid合理布局,让大家1起领略其强劲的风采。

自然,接下来的示例并不是我想出来的,这是我挖出来的,关键制做者是Rachel Andrew。在再次往下阅读文章以前,大家应当1起谢谢Rachel Andrew,谢谢他给大家出示这么多相关于CSS Grid Layout的示例。另外假如你想在你的访问器中能一切正常的演试接下的相关于CSS Grid Layout的示例,你得先确保你已阅读文章了《CSS Grid合理布局实例教程之访问器打开CSS Grid Layout汇总》1文,而且依照文章内容中的方式开展过设定。假如沒有话,也许你将看不见下面示例的实际效果。咱也不纠结了,刚开始实战演练吧。

界定1个网格

能够给父器皿的display特性设定为gridinline-grid来界定1个网格。这样你便可以应用grid-template-columnsgrid-template-rows特性来建立1个网格。

在这个示例中,建立了1个3列网格,在其中3个列的列宽是100px,而且特定列与列之间的间隔为10px。另外网格具备3行,每行的高宽比是全自动的,此外行与行之间的间隔是10px。简易点说便是1个3行3列的网格,而且列与列之间,行与行之间的间隔全是10px

此时访问器将器皿中的子元素全自动填入到每一个网格模块格中,当超出特定的列数时,网格会全自动换行,以下图所示:

看看编码是如何进行的:

HTML


拷贝编码
编码以下:
<font face="Courier New"><font face="Arial">
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
</div></font>
</font>

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(也便是鲜红色地区)。并且当子元素在1行填不下时,就会全自动换行,如.f.j全自动换到第2行显示信息。

根据网格线的占位区

网格中的模块格是有网格线区划出来的,那末在网格合理布局中,一样可使用网格线来给子元素设定占位地区。根据上例,在器皿.wrapper下面有10个子元素.a~.j,接下看来怎样根据根据网格线来完成各种各样在网格合理布局中的地区。

针对网格线,在网格合理布局中有两种,1种是列线,另外一种是行线。对应的个网格模块格都有列线起止线(grid-column-start)、列线停止线(grid-column-end)和行线起止线(grid-row-start)、行线停止线(grid-row-end)。

如上图所示,紫色的是列网格线,而蓝色的是行网格线,在其中高亮度大红的那个模块格列起止线是line3,列停止线是line4,行起止线是line3,行停止线是line4。也便是说这4条网格线间的地区是1个模块格。

接下来,看1个示例,怎样用网格线完成模块格占位地区:

HTML


拷贝编码
编码以下:

<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
</div>

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对换,那末很简易就可以完成:


拷贝编码
编码以下:
<font face="Courier New">
<font face="Arial">.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;
}</font>
</font>

运作的实际效果以下:

线上实例

网格线简写

前面两个示例向大伙儿演试了怎样用网格线完成合理布局,能够说是简易便捷,唯1便是写编码不便,要甚么grid-column-startgrid-column-end这些。实际上有1种简写方法,可让你已不痛楚。

网格线的简写方法,实际上便是grid-columngrid-rowstartend值合拼在1起,二者之间用/来隔开。例如:


拷贝编码
编码以下:
<font face="Courier New">
<font face="Arial">.a{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}</font>
</font>

能够写成:


拷贝编码
编码以下:
<font face="Courier New">
<font face="Arial">.a{
grid-column: 1 / 2;
grid-row: 1 / 2;
}</font>
</font>

这样1来,上例的编码,大家便可以换为简写方法:


拷贝编码
编码以下:
<font face="Courier New">
<font face="Arial">.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;
}</font>
</font>

实际效果依然:

线上实例

网格地区完成元素占位区

在CSS Grid Layout中有1个重要东东,网格地区grid-area。网格地区他是由4条网格线构成的1个室内空间,简易点说,1个网格模块格也是1个网格地区(由于他也是有4条网格线构成的1个室内空间),好几个模块格合拼在1起也是1个网格地区。这样1来,要完成上例的实际效果,还能够应用网格地区grid-area来进行。

在实际做实例以前,先简易的掌握,网格地区是由哪几条网格线构成。构成网格地区的网格线次序是row-start/column-start/row-end/column-end。每一个网格线之间也是应用/来隔开。

接下来将上例应用网格地区更新改造1下,更新改造以后的款式编码以下:


拷贝编码
编码以下:
<font face="Courier New">
<font face="Arial">.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;
}</font>
</font>

实际效果以下:

线上实例

是否让你的全球变得更简易了。

总结

在这篇文章内容中关键根据几个简易的案例向大伙儿演试了怎样应用界定网格,又是怎样应用网格线完成模块格合理布局,能够说这样的合理布局弱爆了,和报表的模块格沒有甚么不1样嘛,但实际是残暴的,大家的合理布局是星罗万像,沒有这么简易。并不是说CSS Grid Layout很强劲嘛,那又要怎样完成1些繁杂的合理布局呢?敬请观注下章溶解,向大伙儿论述怎样完成模块格合拼实际效果。