C&C Docs
Log in

cnc-autolayout

Tiles its children to fill the space it is given — the video-call grid. It picks a row and column count from how many children there are and how wide the container is, sizes every tile towards a 3:2 shape, centres the whole block, and re-runs the whole calculation whenever the container resizes or a child is added or removed.

Quick start

Give the widget a height and drop children in. You write no grid, no widths and no positions — every child is absolutely placed for you. Resize this window and the tiles re-flow.

1
2
3
4
5
6 
<div style="height: 260px">
  <cnc-autolayout style="width: 100%; height: 100%">
    <div class="bg-primary-600 rounded">1</div>
    <div class="bg-purple-600 rounded">2</div>
    <div class="bg-emerald-600 rounded">3</div>
  </cnc-autolayout>
</div>

How the grid is chosen

There is no configuration because the shape is derived, not declared. The widget:

  1. Measures its own box. If either dimension is zero it stops — this is why the container needs a height.
  2. Counts the children and searches for the smallest row count (for a landscape container) or column count (for a portrait one) that can hold them all at a reasonable density.
  3. Sizes tiles towards 3:2, shrinking them if that would overflow the width, and widening them by up to 40% if there is room to spare.
  4. Centres the block in both axes, and treats a short last row separately: its tiles are widened towards 3:2 until they fill the row, then centred. So the bottom row of an uneven grid is larger than the rows above it rather than leaving a hole.

Every tile is then given position: absolute plus explicit left, top, width and height as inline styles. Those four properties are the widget's to write; do not set them yourself on a tile.

Things to know

  • Give it a height. The widget is display: block with no height of its own, and the layout function returns immediately when either dimension measures zero. An autolayout with no height is not an error, it is simply blank.
  • The tiles' geometry is not yours. position, left, top, width and height are overwritten as inline styles on every pass. Set anything else you like — background, border, radius, contents.
  • Nothing happens server-side. Tiling runs in mount(), so the first server-rendered paint is unpositioned children in normal flow. Keep tiles visually inoffensive when stacked, or the first frame flashes.
  • The observer watches the whole subtree. Any node added or removed anywhere inside — including deep in a tile's own content — triggers a full relayout. Tiles containing frequently-changing lists are worth watching.
  • A selector can reach too far. It runs as querySelectorAll on the host, so it matches at any depth. A match nested inside another positioned element is placed against that element, not the autolayout, and lands in the wrong place.

Usage guidance

Use it where the tile count changes at runtime and every tile matters equally — a call grid, a camera wall, a set of live charts on a screen nobody scrolls. Anywhere the count is known and the reader scrolls, plain CSS grid is better: it costs no JavaScript, needs no fixed height, and lets you say what you actually want about columns and gaps. Reach for cnc-grid-stack instead when tiles should be draggable and resizable, and cnc-cards when the items are content rather than viewports.

← Back to Widgets