5) CSS Grid

Learning Goal: To learn how CSS Grid works in creating a responsive website. We have learnt the basics in the first task but now we are going to do into more depth to make more interesting layouts.

A Complete Guide to CSS Grid | CSS-Tricks

CSS Gird Debugging tools

TASK 5a- The CSS Grid container properties

1) Open up the project in Replit for CSS Grid

2) Follow the slides for tasks 5a to learn about the CSS Grid container properties & complete the activities.

Task 5a- CSS Grid (container

TASK 5b- The CSS Grid item properties

1) Open up the project in Replit for CSS Grid

2) Follow the slides for task 5b to learn about the CSS Grid item properties & complete the activities.

Task 5b- CSS Grid (items)

TASK 5c- Using Grid-template-areas

1) Open up the project in Replit for CSS Grid

2) Follow the slides for task 5c to learn about the CSS Grid grid-template-areas and set up a webpage layout that uses these.

Task 5c- CSS Grid (template-areas)

Move onto Responsive navigation

Page updated

Report abuse