CSS Grid布局:图解网格布局中术语之一

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

Grid布局是2010由Microsoft提出的,最后提交的工作草案是2016年9月29日提交的。到目前为止,浏览器对其支持度还是一片顠红,但我们还是通过浏览器的设置可以看到相关的效果。比如Chrome浏览器中通过chrome://flags/#enable-experimental-web-platformfeatures打开Chrome浏览器实验网络平台功能。

Grid布局

或者在你的项目中调用CSS Grid布局的Polyfill。作为学习和研究,这些足够了,但运用到实际的项目中,还是建议大家慎重。

如果需要彻底的对CSS Grid布局有所了解,或者想更好的掌握它,那么必须先了解清楚其相关术语。因为CSS Grid布局中的术语较多,只有掌握了这些术语真正含义,后面才能更好的学习CSS Grid布局相关的特性。那么今天就来看看CSS Grid布局中的相关术语。

特别声明:接下来文章中使用到的图片来源于@Manuel Rego Casasnovas写的《Deep Dive into Grid Layout Placement》一文。

网格线(Grid lines)

网格线(Grid lines)可能是Grid布局规范中最重要的概念之一。网格线是用来在水平和垂直方向分割网格的线。水平方向的网格线是从左向右;垂直方向是从上往下。网格线的编号都是从1开始的。

网格线

正如上图所示,我们使用一个3 x 2的网格来阐述它是怎么工作的。

网格线

如上图所示,红色的网格线1~4将网格分割成了三列,每列的宽度分别为300px200px100px;而蓝色的网格线1~3将网格分割成了两行,每行的高度为100px50px

网格布局属性

为了要设置网格容器内的项目(网格项目)位置,则需要使用到网格布局属性(Grid placement properties)。网格布局属性主要包括:

  • grid-column-start:设置网格项目垂直方向的开始位置网格线
  • grid-column-end:设置网格项目垂直方向的结束位置网格线
  • grid-row-start:设置网格项目水平方向的开始位置网格线
  • grid-row-end:设置网格项目水平方向的结束位置网格线

有了这些属性,可以定义网格项目放置的区域。为了做到这一点,可以使用网格线的序号。也就是说,grid-column-start指定网格项目从第几条网格线(垂直方向)开始,而grid-column-end指定网格项目在第几条网格线(垂直方向)结束。这两个属性的结合,除了可以指定网格项目放置在网格中哪个区域之外,还可以实现单元格的合并(跨列)。同样的grid-row-start用来指定网格项目从第几条网格线(水平方向)开始,而grid-row-end指定网格项目在第几条网格线(水平方向)结束。

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

效果如下:

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css-grid-layout-terminology-part1.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部