Styled Components + grid-template-areas

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;
        "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


This topic was solved and automatically closed 15 days after the last reply. New replies are no longer allowed.