# `Macaw.Grid`
[🔗](https://github.com/dcoai/macaw/blob/v0.1.3/lib/macaw/grid.ex#L1)

The 12-column grid a surface places its cells on (spec/06 §3.3).

Places are `%{x, y, w, h}` in integer units: `x` from 0 to 11, `w` from 1 to 12 with
`x + w` at most 12, `y` from 0, `h` from 1, and `y + h` at most `rows/0`. Reading order is
by `y`, then `x`, then name, and is the DOM order. Placement is by classes from one static
stylesheet, never inline style:

    iex> Macaw.Grid.classes(%{x: 0, y: 2, w: 6, h: 3})
    "mw-cell mw-col-1 mw-span-6 mw-row-3 mw-rows-3"

# `place`

```elixir
@type place() :: %{
  x: non_neg_integer(),
  y: non_neg_integer(),
  w: pos_integer(),
  h: pos_integer()
}
```

# `classes`

```elixir
@spec classes(place()) :: String.t()
```

A place's classes: the cell, its column and span, its row and rows.

# `columns`

```elixir
@spec columns() :: pos_integer()
```

The grid's columns, 12.

# `faults`

```elixir
@spec faults(%{required(String.t()) => %{place: place()}}) :: [Macaw.Layers.Fault.t()]
```

The faults of the cells' places, each at `[:cells, name, :place]`: a bound broken is
`{:out_of_bounds, what, value}` (`what` one of `:x`, `:w`, `:x_plus_w`, `:y`, `:h`,
`:y_plus_h`); two cells overlapping is `{:overlap, other}` at the later one in reading
order. `cells` maps names to anything with a `place`.

# `order`

```elixir
@spec order(%{required(String.t()) => %{place: place()}}) :: [String.t()]
```

The cells' names in reading order: by `y`, then `x`, then name.

# `rows`

```elixir
@spec rows() :: pos_integer()
```

The most rows a grid places a cell in, 64, so every placement has a class.

# `size`

```elixir
@spec size(place(), number(), number()) :: {number(), number()}
```

A place's declared size in CSS pixels: its share of the surface's width and its rows'
height, `{w * width / 12, h * row_height}`.

# `stylesheet`

```elixir
@spec stylesheet() :: String.t()
```

The grid's one static stylesheet: the grid, a rule per column start, column span, row
start and row span, and the container query that stacks every cell into reading order
when the surface is narrower than 40rem.

# `stylesheet_path`

```elixir
@spec stylesheet_path() :: String.t()
```

The stylesheet's path, its content address (`Macaw.Component.Stylesheet.path/1`).

---

*Consult [api-reference.md](api-reference.md) for complete listing*