css grid布局是啥？grid布局的基本介绍

.grid-container {
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;
}

.item {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}

我们可以命名网格线，这样就不必计算需要引用的网格线。可以在网格模板列和网格模板行属性中将这些名称声明为可选参数。

.grid-container {
  display: grid;
  grid-template-columns: 150px [col-foo] 150px 150px [col-bar];
  grid-template-rows: 150px [row-foo] 150px [row-bar];
}

.item {
  grid-column-start: col-foo;
  grid-column-end: col-bar;
  grid-row-start: row-foo;
  grid-row-end: row-bar;
}
网格轨道和单元格
网格轨道是2个相邻网格线之间的空间，它们是网格的行和列。下图突出显示了第一行和第二行网格线之间的网格轨迹。我们可以使用grid-row-gap和grid-column-gap属性，利用行间隙和列间隙来把网格轨道分开。
网格单元是2个相邻行网格线和2个相邻列网格线之间的空间。它在概念上类似于表格单元格，因为它是网格的单个单元。下图突出显示了第三和第四列网格线以及第二和第三行网格线之间的网格单元。
.grid-container {
  display: grid;
  grid-template-columns: 150px 150px 150px; /* three columns  */
  grid-template-rows: 150px 150px; /* two rows  */
}
网格区域
网格区域由1个或多个网格单元组成，并由网格区域的每一侧上的4个网格线约束。您可以使用其grid-template-areas属性定义的边界网格线或其名称来引用网格区域。然后可以将网格项目分配给具有网格布局属性的网格区域，例如：grid-area，grid-row，grid-column属性或它们的长格式的等价物。
.grid-container {
  display: grid;
  grid-template-columns: 150px 150px 150px; /* three columns  */
  grid-template-rows: 150px 150px; /* two rows  */
  grid-template-areas: "a b b"
                       "a b b";
}

.item-1 {
  grid-area: a;
}

.item-2 {
  grid-area: b;
}
如前所述，图表的阴影部分是网格轨道之间的沟槽，可以使用grid-row-gap和grid-column-gap属性控制。
所以，把它们放在一起：
总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。
以上就是css grid布局是什么？grid布局的基本介绍的详细内容，更多请关注php中文网其它相关文章！
				
				

					
微信
					
分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：css grid布局是啥？grid布局的基本介绍