Created
December 15, 2017 22:33
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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