Boxes of different sizes

Each column is as wide as its widest box, and each row is as tall as its tallest box.

7 boxes0 edges0 findings

Edit it

# Boxes of different sizes
board grid(columns: 3) nested {
  wide 260x40
  tall 60x160
  square 90x90
  small 40x30
  medium 140x70
  long 200x50
}

7 boxes, 0 edges. The audit finds no defect.

The input

The same layout in TypeScript. The input is plain data, so it can come from JSON.

import { layout } from "ireko";

const input = {
  "root": {
    "id": "board",
    "mode": "nested",
    "layout": {
      "type": "grid",
      "columns": 3
    },
    "children": [
      {
        "id": "wide",
        "size": {
          "width": 260,
          "height": 40
        }
      },
      {
        "id": "tall",
        "size": {
          "width": 60,
          "height": 160
        }
      },
      {
        "id": "square",
        "size": {
          "width": 90,
          "height": 90
        }
      },
      {
        "id": "small",
        "size": {
          "width": 40,
          "height": 30
        }
      },
      {
        "id": "medium",
        "size": {
          "width": 140,
          "height": 70
        }
      },
      {
        "id": "long",
        "size": {
          "width": 200,
          "height": 50
        }
      }
    ]
  }
};

const result = layout(input);