25. Grid
This is an example of how you can use the map()
function to generate rows and columns.
Code component
const rows = [0, 1]
const cols = [0, 1]
const size = 70
const padding = 10
export function CC25Grid() {
return (
<Frame
width={size * cols.length + padding * (cols.length - 1)}
height={size * rows.length + padding * (rows.length - 1)}
backgroundColor="transparent"
center
>
{rows.map(rowIndex => {
return cols.map(colIndex => {
return (
<Frame
// Visual & layout
size={size}
radius={20}
backgroundColor="#fff"
top={(size + padding) * rowIndex}
left={(size + padding) * colIndex}
// Animation
whileHover={{ scale: 0.8, opacity: 0.5 }}
// Required by React
key={`${rowIndex} : ${colIndex}`}
/>
)
})
})}
</Frame>
)
}
Framer Motion
When working with regular divs instead of frames, we might as well use a CSS Grid.
const rows = [0, 1]
const cols = [0, 1]
const size = 70
const padding = 10
export function FM25Grid() {
return (
<Center>
<div
style={{
display: "grid",
gridTemplateColumns: "auto auto",
gridGap: padding,
}}
>
{rows.map(rowIndex => {
return cols.map(colIndex => {
return (
<motion.div
style={{
width: size,
height: size,
borderRadius: 20,
backgroundColor: "#fff",
}}
whileHover={{ scale: 0.8, opacity: 0.5 }}
key={`${rowIndex} : ${colIndex}`}
/>
)
})
})}
</div>
</Center>
)
}
Override
export function Grid(): Override {
return {
whileHover: { scale: 0.8, opacity: 0.5 },
}
}