readme.md

Columns

A component that provides a simple column layout

How to use

Step 1: Install the devvit kit

Open your project folder in terminal app.

Run npm install @devvit/kit --save

Step 2: Import the Columns component

Add the line import { Columns } from '@devvit/kit'; in the beginning of the component file.

Step 3: Use Columns in your component

Add Columns element to any component in your app like in examples below:

Static content:

Interactive Example

<Columns columnCount={2} gapX="5px" gapY="10px" order="column">

  <hstack backgroundColor="grey">
    <text>Birds</text>
  </hstack>
  <hstack>
    <text>Raven</text>
  </hstack>
  <hstack>
    <text>Parrot</text>
  </hstack>

  <hstack backgroundColor="grey">
    <text>Dogs</text>
  </hstack>
  <hstack>
    <text>Bulldog</text>
  </hstack>
  <hstack>
    <text>Poodle</text>
  </hstack>

</Columns>

Dynamic content

Interactive example

<Columns columnCount={2} gapX="5px" gapY="10px" order="column">

  {participants.map(participant => {
    return (
      <hstack border="thin" alignment="center middle">
        <text>{participant}</text>
      </hstack>
    );
  })}

</Columns>

Props and values

columnCount

Number of columns to render.

maxRows

Optional limit for number of rows.

order

Specifies the logic of item distribution.

• "column": items are split evenly between all columns.
• "column-fill": fill each column to its maximum (specified by maxRows) before filling the next.
• "row": fill each row to it's maximum (specified by columnCount) before filling the next.

Examples of 7 items ordered in 3 columns with 4 rows limit

columnCount={3} maxRows={4} order={...}

column

1  4  6
2  5  7
3  _  _

column-fill

1  5  _
2  6  _
3  7  _
4  _  _

row

1  2  3
4  5  6
7  _  _

gapX

Optional horizontal gap between items (in pixels).

gapY

Optional vertical gap between items (in pixels).