Skip to content

Instantly share code, notes, and snippets.

@mhauken mhauken/modulo.jsx
Last active Nov 21, 2019

Embed
What would you like to do?
Modulus example
import React from "react"
import styled from "styled-components"
const anArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
const colorArray = ["#D8CFAC", "#F8F2D3", "#FFAB00", "#62796C", "#DAE0DC"]
const ModulusExample = () => (
<Wrapper>
{anArray.map((item, index) => (
<Example key={item} color={colorArray[index % colorArray.length]}>
{item}
</Example>
))}
</Wrapper>
)
const Wrapper = styled.div`
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 24px;
grid-row-gap: 24px;
`
const Example = styled.div`
min-height: 135px;
background-color: ${p => p.color};
padding: 12px;
`
export default ModulusExample
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.