@spec grid(
  [term()],
  keyword()
) :: t()

Arranges outputs into a grid.

Note that the grid does not support scrolling, it always squeezes the content, such that it does not exceed the page width.

Options

• :columns - the number of columns in the grid. Optionally, supports a tuple of column width ratio, such as {1, 2, 1}, for three columns, where the middle one is twice as wide as the others. Defaults to 1

• :boxed - whether the grid should be wrapped in a bordered box. Defaults to false

• :gap - the amount of spacing between grid items in pixels. Defaults to 8

Examples

images =
  for path <- paths do
    path |> File.read!() |> Kino.Image.new(:jpeg)
  end

Kino.Layout.grid(images, columns: 3)

@spec tabs([{String.t() | atom(), term()}]) :: t()

Arranges outputs into separate tabs.

Examples

data = [
  %{id: 1, name: "Elixir", website: "https://elixir-lang.org"},
  %{id: 2, name: "Erlang", website: "https://www.erlang.org"}
]

Kino.Layout.tabs([
  Table: Kino.DataTable.new(data),
  Raw: data
])