@ag.ds-next/columns

--- title: Columns description: A grid consists of a framework of cells laid out and aligned vertically and horizontally. It helps users read and visually navigate website content more easily, using a responsive, scrollable column structure. group: Layout

Usage no npm install needed!

<script type="module">
  import agDsNextColumns from 'https://cdn.skypack.dev/@ag.ds-next/columns';
</script>

README

title: Columns description: A grid consists of a framework of cells laid out and aligned vertically and horizontally. It helps users read and visually navigate website content more easily, using a responsive, scrollable column structure. group: Layout

This package includes the components <Columns /> and <Column />.

<Columns gap={0.5}>
    <Column columnSpan={1}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={1}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={1}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={1}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={1}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={1}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={1}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={1}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={1}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={1}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={1}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={1}>
        <Box background="shadeAlt" padding={1} />
    </Column>
</Columns>

Col spans

Use the columnSpan prop to control how many columns you want to column to span.

<Columns gap={0.5}>
    <Column columnSpan={3}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={3}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={3}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={3}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={6}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={6}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={4}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={4}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={4}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={2}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={4}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={4}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={2}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={8}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={4}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={2}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={2}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={2}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={2}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={2}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={2}>
        <Box background="shadeAlt" padding={1} />
    </Column>
</Columns>

Row and column gaps

The gap prop effects both the row and column gap. To set a different gap for rows and column, you can use the columnGap and rowGap props.

<Columns columnGap={0.5} rowGap={2}>
    <Column columnSpan={3}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={3}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={3}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={3}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={4}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={4}>
        <Box background="shadeAlt" padding={1} />
    </Column>
    <Column columnSpan={4}>
        <Box background="shadeAlt" padding={1} />
    </Column>
</Columns>

Column start and end

The columnStart and columnEnd props can be used to determine the Column's start and end location within the row.

<Columns>
    <Column columnStart={3} columnEnd={9}>
        <Box background="shadeAlt" padding={1} />
    </Column>
</Columns>