Wrapper.js

import React from 'react';
import styled from 'styled-components';

const WrapperRoot = styled.div`
    max-width: 1024px;
    margin: 0 auto;

    > * {
        border: 2px solid #f08c00;
        padding: 10px;
        background-color: #ffec99;
        border-radius: 5px;
    }
`;

const NavRoot = styled.nav`
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
`;



const WrapperStyle = styled(WrapperRoot)`
    display: grid;
    grid-gap: 20px;
    grid-template-areas:
        "header"
        "nav"
        "content";

    @media (min-width: 700px) {
        grid-template-columns: 1fr 5fr;
        grid-template-areas:
            "header  header   header"
            "nav     content  content";

        nav ul {
            flex-direction: column;
        }
    };

`;

const Header = styled.header`
    grid-area: header;
`;

const Nav = styled(NavRoot)`
    grid-area: nav;
`;

const Content = styled.div`
    grid-area: content;
`;

const Wrapper = (props) => {
    return(
        <WrapperStyle>
            <Header>Header</Header>
            <Nav>
                <ul>
                    <li><a href="">Nav 1</a></li>
                    <li><a href="">Nav 2</a></li>
                    <li><a href="">Nav 3</a></li>
                </ul>
            </Nav>
            <Content>
                {props.children}
            </Content>
        </WrapperStyle>
    );
};

export default Wrapper;