Responsive Design with CSS Grid, Emotion and React in TypeScript
Boston TypeScript
June 18, 2019
Alex Fenwood Hughes
Why CSS Grid for responsive design?
- Built in = Less bloat from libraries
- Powerful
- Simple
3 CSS Grid Properties
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 100px 300px;|
|
What about more complex layouts?
Sounds great, any downsides?
Legacy browser support
Now, let's walk through how to:
- Create a responsive page using CSS Grid
- Use CSS-in-JS with CSS Grid
- Use TypeScript with Grid components
Responsive Design with CSS Grid, Emotion and React
By Alex Hughes
