Skip to content

Instantly share code, notes, and snippets.

@adrianmcli
Created December 15, 2017 22:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adrianmcli/c513e3b74ec115d923f2f5a749887793 to your computer and use it in GitHub Desktop.
Save adrianmcli/c513e3b74ec115d923f2f5a749887793 to your computer and use it in GitHub Desktop.
A width-constrained SPA layout with CSS Grid in React and Styled-Components
import React from "react";
import styled from "styled-components";
const Container = styled.div`
/* make it full height and width */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* layout three rows: navbar, content, and footer */
display: grid;
grid-template-rows: auto 1fr auto;
`;
const Navbar = styled.nav`
background: darkred;
/* center the inner container */
display: flex;
justify-content: center;
`;
const NavbarContainer = styled.div`
background: red;
/* as wide as it can be, but not too wide */
width: 100%;
max-width: 480px;
`;
const Content = styled.div`
background: darkblue;
/* center the inner container */
display: flex;
justify-content: center;
`;
const ContentContainer = styled.div`
background: blue;
/* as wide as it can be, but not too wide */
width: 100%;
max-width: 480px;
`;
const Footer = styled.footer`
background: grey;
/* make footer stick to the bottom */
grid-row-start: 3;
grid-row-end: 4;
/* center the inner container */
display: flex;
justify-content: center;
`;
const FooterContainer = styled.div`
background: darkgrey;
/* as wide as it can be, but not too wide */
width: 100%;
max-width: 480px;
`;
export default () => (
<Container>
<Navbar>
<NavbarContainer>Nav stuff here</NavbarContainer>
</Navbar>
<Content>
<ContentContainer>Content stuff here</ContentContainer>
</Content>
<Footer>
<FooterContainer>My footer here</FooterContainer>
</Footer>
</Container>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment