css-doodle

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
From 1. A single number is used for both columns and rows.
rows
From 1. Separated from the columns by x or a comma.
depth
A third number. 1x1xN is a chain of nested cells; any other size with depth is a tree. See @z.

Columns come first, then rows. Spaces are ignored, and these writings all mean the same thing: 5x7, 5 x 7, 5,7, 5X7.

The attribute sets only the dimensions. Size, gap and fill still come from CSS, or from the @grid property. Each axis is capped at 64, or 256 with experimental. If one axis is 1, the other may go up to the square of that cap: 4096, or 65536 with experimental. Depth is clamped so the leaf count stays within the same budget. Values outside the cap are clamped.

Examples

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

When one axis is 1 the other may go much further, so a row or a stack of cells is easy: 

<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

A third number is the depth. On a 1x1xN grid the cells nest in a chain. @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