在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网别的相干文章！
