css-doodle

Create

Selector

:container

The element inside the component that holds the cells. It uses CSS Grid Layout by default.

Syntax

  • :container { }
  • :container(<selector>) { }

The layout is :doodle → :container → cells. Properties whose names start with grid, and gap, written on :doodle are forwarded to the container, so you rarely need to address it directly. 

@grid: 3x1 / 60vmin / #fff ß #000;
@place: center;
@size: @pn(80%, 55%, 35%);

@cell(1, 2) {
  @grid: 1 / 100%;
  border: 1px solid #000;
  :after {
    content: @pn(':doodle', ':container');
    position: absolute;
    color: #000;
    top: 0;
    left: .5em;
    transform: translateY(-50%);
    padding-inline: 5px;
    background: #fff;
  }
}

@cell(3) {
  background: @doodle(
    @grid: 4 / 100% _1px;
    background: #000;
  );
}
Open in playground

Examples

Transform the whole grid without touching the host element: 

@grid: 8 / 60vmin;

:container {
  transform: rotate(45deg) scale(1.5);
  gap: 5px;
}

border: 1px solid #000;
Open in playground

The +, *, ~ and ^ commands of @grid are shortcuts for the same transforms.

Switch from grid to flexbox, and the cells become flex items: 

@grid: 4 / 60vmin _4px;

:container {
  display: flex;
}

background: #000;
flex: @iI;
Open in playground

The row and col flags of @grid switch the container to flexbox in one word, and give every cell flex: 1. col also sets flex-direction: column.

See also