Help

The Community will be temporarily unavailable starting on Friday February 28. We’ll be back as soon as we can! To learn more, check out our Announcements blog post.

Styled Components + grid-template-areas

Topic Labels: Custom Extensions
2784 0
cancel
Showing results for 
Search instead for 
Did you mean: 
Jack_Manuel
7 - App Architect
7 - App Architect

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

Screenshot 2021-09-15 at 18.04.20
This text will be hidden

0 Replies 0