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

经过网格术语一术语二两篇文章,我们对CSS Grid布局中术语有一定的了解。除了这两篇文章提到的术语之外,还有其他相关的术语。这篇文章主要和大家一起来探讨网格。

CSS Grid布局说的就是网格,那么网格就是其中最重要的术语之一。接下来,我们要说的就是网格相关的内容。

声明网格和网格容器

如果需要使用CSS Grid给Web页面进行布局,首先需要声明网格。在CSS中,声明网格主要方式就是通过给某个容器的display设置为gridinline-grid或者subgrid值之一。同时这个容器就被称为网格容器,而这个容器的子元素就称为网格项目

网格容器不是块容器(display:block),因此在块容器中的一些属性使用并不适用于网格容器当中:

  • 多列布局属性column-*不能用于网格容器
  • 浮动和清除浮动,对于网格项目中使用不生效。但是,浮动的属性对于网格容器的子元素还是生效的
  • vertical-align属性对于网格项目不生效
  • ::first-line::first-letter伪元素不能用于网格容器

网格容器大小

在CSS Grid布局当中,通过grid-template-rowsgrid-template-columns隐式的确定了一个网格的列数、行数以及网格的大小:

.grid {
  display: grid;
  grid-template-columns: 150px 20px  300px 20px 150px;
  grid-template-rows: 100px 20px 100px 20px 50px;
}

上面代码创建了一个5 x 5的网格:

显式网格

正如前面所示,通过grid-template-rowsgrid-template-columnsgrid-template-areas三个属性可以显式的创建一个网格容器。而且这三个属性可以简写成grid-template。比如:

grid-template: auto 1fr / auto 1fr auto;

上面代码相当于:

grid-template-rows: auto 1fr;
gr
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

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

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

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