solid-columns

Installation

bun install @taep96/solid-columns

Usage

import { Columns } from "@taep96/solid-columns";

<Columns
  class="flex gap-2 *:flex *:flex-1 *:flex-col *:gap-2"
  columns={3} // number (default)
  columns={{ // or breakpoints
    2: "640px", // anything less is 1 column
    3: "768px",
    4: "1024px",
    5: "1280px",
    6: "1536px",
  }}
>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</Columns>

Props

| Name | Type | Default | Description | | ---------- | ---------------------------------- | ------- | --------------------------------------------- | | columns? | number \| Record<number, string> | 3 | A fixed amount or and object with breakpoints |