Styled Components + grid-template-areas

[Jack_Manuel]

Not a question, just thought I’d share in case any rookie developers like me are struggling with laying out a custom app.

I’m having great success making various layouts for my components by utilising grid template areas via Styled Components - it’s incredibly intuitive.

Here’s an example snippet and the resulting layout. Would love to hear anymore layout tips!

const Section = styled.div`
    border: solid black 1px;
    display: flex;
    align-items: center;
    padding: 5px;
`

const HeadSection = styled(Section)`
    grid-area: hd;
`
const SidebarSection = styled(Section)`
    grid-area: sd;
`
const LineItemsSection = styled(Section)`
    grid-area: li;
`

const DeliverySection = styled(Section)`
    grid-area: dl;
`
const TermsSection = styled(Section)`
    grid-area: tm;
`
const TotalsSection = styled(Section)`
    grid-area: to;
`

const FooterSection = styled(Section)`
    grid-area: ft;
`

const GridContainer = styled.div`
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 10px;
    grid-template-areas:
        "hd hd hd hd hd hd hd hd hd"
        "sd sd sd li li li li li li"
        "sd sd sd li li li li li li"
        "sd sd sd dl dl dl dl dl dl"
        "tm tm tm tm tm tm to to to"
        "ft ft ft ft ft ft ft ft ft";
`

This text will be hidden