css-doodle入门（二）


网格 grid


第一讲提到过 css-doodle 是基于 CSS 的 grid 布局开发的Web组件，网格 grid 因此在 css-doodle 里非常重要。css-doodle 标签实际上可以将 grid 直接定义在里面：


<css-doodle grid="5">
        :doodle {
                grid-gap: 1px;
                width: 260px;
                height: 260px;
        }
        background: tan;
</css-doodle>


<css-doodle grid="5"> 中，grid=5 表示网格是 5x5 共25个单元格。如果需要 4行5列 的网格结构，则有多种写法：


grid="4x5"
grid="4 x 5"
grid="4,5"
grid="4, 5"


其中的乘号是小写字母 x ，逗号是小角逗号。甚至，等号后面的值不需要引号也是可以的，但不建议，因为<css-doodle> 是一个第三方的 HTML 标签，其内若有等号，则等号后面的值都需要使用小角引号包裹起来，这是HTML的语法规范。另外需要注意的是，用两个数字表示行列时，第一个数值定义列即横向方向分为几等分，第二个数值定义行即纵向方向分成几等分。


css-doodle 还提供一个属性 @grid 来定义网格的行列数，写在 :doodle {} 代码块里：


<css-doodle grid="4,5">
        :doodle {
                @grid: 6,5;
                grid-gap: 1px;
                width: 260px;
                height: 260px;
        }
        background: tan;
</css-doodle>


这里，css-doodle 标签已经规定了 4x5 的网格列行结构，又在  :doodle {} 代码块里有 @grid: 6,5; 语句，情况会怎么样？@grid 属性优先级别更高，所以，得出的网格结构是5行6列。


@gird 属性是一个 css-doodle 中的自定义CSS属性而非HTML范畴，所以，@gird: 后面的值不能用引号。@grid: 的值的组成方式则与 grid= 的一样，例如 6x6 ，写成 @grid: 6; 或 @grid: 6x6; 等等。


需要留意的是，grid值当存在两个值时，列先行后， grid='4,5' 或 @grid: 4x5，都是表示4列5行。


css-doodle 的单元格总数有上限，官网称支持最多 1024 个单元格总数，亦即行列的乘积不要大于1024，但随着版本的更新，单元格总数的上限已经可以达到 64 的平方。当然，单元格越多，消耗的资源越大、运行速度越慢，在实际应用中应权衡利弊，恰当设置行列总数。

前一篇: css-doodle入门（三）
下一篇: css-doodle入门（一）