Create

Attribute

grid

The number of columns and rows, and an optional depth. A single number makes a square. It defaults to 1x1.

Syntax

  • <css-doodle grid="5"></css-doodle>
  • <css-doodle grid="5x7"></css-doodle>
  • <css-doodle grid="1x1x8"></css-doodle>

Columns, rows and depth, separated by x or a comma. Spaces are ignored, so 5x7, 5 x 7, 5,7 and 5X7 are the same. The attribute sets only the dimensions; size, gap and fill come from CSS.

Columns and rows

Each cell knows its place: @i is the index in reading order, @x the column, @y the row. 

<css-doodle grid="5">
  :doodle {
    @size: 60vmin;
    gap: 4px;
  }
  background: #000;
  color: #fff;
  @content: @i;
</css-doodle>
Open in playground

Two numbers are columns, then rows. 5x2 is wide; 2x5 is the other way around. 

<css-doodle grid="5x2">
  :doodle {
    @size: 60vmin;
    gap: 2px;
  }
  background: #000;
  color: #fff;
  font-size: 80%;
  @content: @x,@y;
</css-doodle>
Open in playground

Limits

Each axis is capped at 64, or 256 with experimental, and larger values are clamped. When one axis is 1 the other may go up to the square of the cap, 4096 or 65536: 

<css-doodle grid="1x35">
  :doodle {
    @size: 60vmin;
  }
  @gap: 1px;
  background: #000;
  transition: width .2s ease @r(.5s);
  width: @r(5%, 100%);
</css-doodle>
Open in playground

Depth

A third number nests the cells. On a 1x1xN grid they form a chain, and any other size with depth is a tree. The depth is clamped so the leaf count stays within the same limit. @z is the depth of the current cell, counted from 1: 

<css-doodle grid="1x1x7">
  :doodle {
    @size: 60vmin;
  }
  :container {
    scale: .6;
  }
  @size: 100%;
  box-shadow: inset 0 0 0 1px #000;
  margin: 1px;
  border-radius: 100% 0 0 0;
  place-self: start;
  translate: -32% 0;
  transform-origin: 0 100%;
  @cell (i > 1) {
    @size: 61.8%;
    translate: 161.8% -100%;
    rotate: 90deg;
  }
</css-doodle>
Open in playground

The @grid property

The same value can be set with the @grid property inside the code, which also takes the size, gap and other options in one line. When both are present the property wins. 

<css-doodle grid="2">
  /* the property overrides the attribute */
  @grid: 5x5 / 60vmin _4px;
  background: #000;
  color: #fff;
  @content: @pn([a-z]);
</css-doodle>
Open in playground

See also