The syntax of <css-doodle /> is based on CSS and provides several extra utility functions and shorthand properties.

Grid

The number of rows and columns in the grid is defined by the grid attribute on the element, ranged from 1 to 32. It's default to be 1x1 when no value or 0 is given.

:doodle { grid-gap: 1px; width: 8em; height: 8em; } background: #60569e; :doodle { grid-gap: 1px; @size: 8em; } background: #60569e;

The row or column is limited up to 1024 only when the grid is 1-dimensional:

:doodle { grid-row-gap: 1px; @size: 8em; /* width: 8em; height: 8em; */ } background: #60569e; width: @rand(5%, 100%); /* from 5% to 100% by random */ :doodle { grid-row-gap: 1px; @size: 8em 12em; } transition: .2s ease @rand(500ms); background: #60569e; will-change: width; width: @rand(5%, 100%);

The following formats of grid value are recognizable:

grid = "0"

grid = "5"

grid = "20"

grid = "5x7"

grid = "5 x 7"

grid = "5,7"

There's an alternative way to set up the grid by using the @grid property.