css-doodle入门（二）

马黑黑 · 发表于 2023-4-11 08:21

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-4-11 12:07 编辑

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 的平方。当然，单元格越多，消耗的资源越大、运行速度越慢，在实际应用中应权衡利弊，恰当设置行列总数。