Atomic Layout
Getting started
GitHub
Search…
Introduction
Motivation
Resources
FAQ
Getting started
Installation
First composition
Responsive composition
Nested composition
Fundamentals
Breakpoints
Prop aliases
Responsive props
API
Layout
Components
Hooks
Utilities
Recipes
Semantics
Namespaces
Iterative areas
Responsive layout
Explicit media query
Powered By
GitBook
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
2yr ago
Copy link