Iterative areas
A single template area may be rendered multiple types, for example during the iteration of a list items rendering.
import React from 'react'
import { Composition } from 'atomic-layout'
export const List = ({ items }) => (
<Composition areas="column" gap={10}>
{(Areas) => items.map((item) => (
<Areas.Column key={item.id} col="auto">{item}</Areas.Column>
))}
</Composition>
)
By setting
row
and col
props to "auto" you enable the auto-placing algorithm of CSS Grid.
Last modified 3yr ago