Iterative areas

Search…

Iterative areas

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

Recipes - Previous

Namespaces

Next - Recipes

Responsive layout

Last modified 1yr ago

Copy link