好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS3网格布局(gridlayout)基础知识

网格模板(grid-template)属性及其普通写法(longhands)定义了一个固定数量的轨道,构成显式网格。

当网格项目定位在这些界限之外,网格容器通过增加隐式网格线生成隐式网格轨道。

这些隐含的和显式的网格线一起构成隐式网格(implicit grid)。

隐式网格轨道的尺寸由网格自动行(grid-auto-rows)和网格自动列(grid-auto-columns)属性来确定。


网格自动流(grid-auto-flow)属性用来控制无明确位置的网格项的自动定位(auto-placement),

一旦显式网格被填满(或者如果没有显式的网格),auto-placement也将导致隐式网格轨道的生成。

自动生成行和列的尺寸:grid-auto-rows 和 grid-auto-columns 属性



如果一个网格项被放到一个未明确定义尺寸的行或列中,隐式网格轨道将被创建来容纳它。

这在两种情况下会发生:通过显式定位到一个超出范围的行或列中,或是由自动定位算法创建额外的行或列。

网格自动列和网格自动行属性用来指定这样的隐式创建的轨道的大小。


我们仍然通过实例来学习这个属性的用法:

#grid {    display: grid;    grid-template-columns: 20px;    grid-template-rows: 20px }  #A { grid-column: 1;          grid-row: 1; }  #B { grid-column: 5;          grid-row: 1 / span 2; }  #C { grid-column: 1 / span 2; grid-row: 2; } 

A

查看更多关于CSS3网格布局(gridlayout)基础知识的详细内容...

  阅读:34次