特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
经过网格术语一和术语二两篇文章,我们对CSS Grid布局中术语有一定的了解。除了这两篇文章提到的术语之外,还有其他相关的术语。这篇文章主要和大家一起来探讨网格。
CSS Grid布局说的就是网格,那么网格就是其中最重要的术语之一。接下来,我们要说的就是网格相关的内容。
声明网格和网格容器
如果需要使用CSS Grid给Web页面进行布局,首先需要声明网格。在CSS中,声明网格主要方式就是通过给某个容器的display
设置为grid
、inline-grid
或者subgrid
值之一。同时这个容器就被称为网格容器,而这个容器的子元素就称为网格项目。
网格容器不是块容器(display:block
),因此在块容器中的一些属性使用并不适用于网格容器当中:
- 多列布局属性
column-*
不能用于网格容器 - 浮动和清除浮动,对于网格项目中使用不生效。但是,浮动的属性对于网格容器的子元素还是生效的
vertical-align
属性对于网格项目不生效::first-line
和::first-letter
伪元素不能用于网格容器
网格容器大小
在CSS Grid布局当中,通过grid-template-rows
和grid-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-rows
、grid-template-columns
和grid-template-areas
三个属性可以显式的创建一个网格容器。而且这三个属性可以简写成grid-template
。比如:
grid-template: auto 1fr / auto 1fr auto;
上面代码相当于:
grid-template-rows: auto 1fr;
gr
如需转载,烦请注明出处:https://www.w3cplus.com/css3/css-grid-layout-terminology-part3.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!