Modulus example

modulo.jsx

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