提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 在CSS网格规划中怎样运用grid-template-*属性【css教程】,grid-template-*

grid-template属性重要用于竖立显现网格,个中grid-template-rows和grid-template-columns用于定义网格的行和列、grid-template-areas属性用于指定定名网格地区

在CSS3中引入了新的网格规划(grid layout),重要用来顺应显现和设想手艺的生长尤其是关于一些相应式设想。它的涌现重假如竖立

一个稳固可预感且语义准确的网页规划形式,用来替换过往表现不稳固且烦琐的table、flow以及JS剧本夹杂手艺来完成的网页动态规划。今天在文章中将要引见的是网格属性中的grid-template-*属性的用法,具有肯定参考价值,愿望对人人有所协助

显式和隐式网格

要明白grid-template-*属性,我们起首须要相识显式网格和隐式网格的寄义

显式网格用于竖立显式网格的grid-template-*属性(属性)定义,个中grid-template-rows,grid-template-columns以及grid-template-areas一同定义了明白的网格

隐式网格示意的是网格容器经由过程向网格增加隐式网格线来生成隐式网格轨道。这些线与显式网格一同组成隐式网格。换句话说在网格容器内有网格单位,运用grid-template-*属性定位和调解大小的任何单位格都组成显式网格的一部分,运用此属性定位/调解大小的任何网格单位格都不组成隐式网格的一部分

grid-template-*属性的细致用法

grid-template-*属性用于竖立一个显式的网格,重要用于定义网格单位的位置和大小

特征:

grid-template-rows (网格模板行)、网格模板列(grid-template-columns)、网格模板地区(grid-template-areas)

示例:

经由过程grid-template-rows属性来竖立一行高为100px的网格

.grid {
	display: grid;
	background-color: pink;
	grid-template-rows: 100px;
}

效果图:

假如想设置多行,只须要在后面增加另一个一个长度值,以空格分开第一行

.grid {
	display: grid;
	background-color: pink;
	grid-template-rows: 100px 50px;
}
.grid2{
	background-color: skyblue;
}

效果图:

grid-template-columns属性用于设置网格容器的列属性,实在就相当于列的宽度。当我们须要几列展现时,就设置几个值

.grid {
  display: grid;
  grid-gap: 10px; /* add spacing for better visibility */
  grid-auto-rows: 30px;
  grid-template-rows: 100px 100px ;
  grid-template-columns: 150px 150px;
  background-color: skyblue;

}
.cell{  border:5px solid pink;}

效果图:

总结:以上就是本篇文章的全部内容了,愿望对人人学习网格规划有肯定的协助。

以上就是在CSS网格规划中怎样运用grid-template-*属性的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"在CSS网格规划中怎样运用grid-template-*属性【css教程】,grid-template-*"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线