Skip to main content

r-row

Horizontal layout block that keeps children on a single row.

Usage​

<!-- Equal widths (default) -->
<r-row class="wide-gap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</r-row>

<!-- Proportionate widths follow intrinsic sizing -->
<r-row class="natural" distribution="proportionate">
  <div style="width: 120px">Fixed width</div>
  <div>Flexible content</div>
</r-row>
.wide-gap {
  --gap: 16px;
}

.natural {
  --gap: 24px;
}

Attributes​

  • distribution — equal | proportionate | fit, optional. Defaults to equal.
    • equal: every child shares the row evenly (implemented with flex: 1 1 0).
    • proportionate: measures each child’s intrinsic width and keeps those proportions across the row.
    • fit: adjusts widths so that all children end up with the same height while roughly preserving their intrinsic aspect ratios.

Proportionate Mode​

  • For r-image children, the component reads the underlying image’s natural width once it loads.
  • Other elements use their rendered width (or explicit width style/attribute if provided) as the reference size.
  • Width shares are recomputed whenever the slot content changes or tracked images finish loading.
  • Computed widths honor the row’s padding and configured gap, so children no longer overflow when the container has horizontal padding.

Fit Mode​

  • Determines each child’s aspect ratio (natural image dimensions for r-image, layout box for everything else).
  • Calculates a shared height that fits within the row (minus gaps) and scales every child’s width so heights match.
  • Sets --r-row-fit-height on each slotted child before applying height: var(--r-row-fit-height) inside the component styles, so you can override that property per child if necessary.
  • Falls back to proportionate behavior if the row width cannot be measured yet (e.g., while detached).

Responsive behavior​

  • Mobile-first: children stack in a single column by default so the gap becomes vertical spacing.
  • At min-width: 768px, the layout switches to a horizontal row and the distribution modes described above apply.

Notes​

  • The host element is display: block with width: 100%; overall height depends on its slotted content.
  • Set the spacing between children by assigning the --gap custom property on <r-row> (defaults to 0 when unset).
  • Content is rendered through a <slot> so nested components/styles flow normally.