Motivation

The purpose of this demo is to deepen my understanding of grid and explore the use case of using grid. Usage of grid flatten out the HTML markup. Build mobile first design with responsive media query. The Design that I will be using is the same design as my Flexbox Demo. flexbox-demo

grid properties

grid-template-row
grid-template-column
grid-template (short-hand)
grid-column
grid-row
grid-column-gap
grid-row-gap
align-items
justify-items
align-self
justify-self

Design Specification

Font-Family: 'Blinker' Bold, Regular
Font-Family: 'PT Sans Pro' Regular
Primary Color - #05CBE9 (cyan)
Background Color - #111D4A (dark blue)
Font Color - #9BA0B3 (gray)

Small Screen

title - 28px (1.75em)
body - 16px (1em)
button - 20px (1.25)

Big Screens

title - 36px (2.25em)
body - 18px (1.125em)
button - 20px (1.25)