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)