_grid.md

Lecture ✍️

Setting up the grid

• Introduction to grid docs
• Again reference that tweet, grid is for more than one column and more than one row, multi dimensional
• You might think then why not just use grid for everything, that is never the case, it's using a combo of block, flexbox and grid to achieve nice design
• Create a dashboard type of layout, show how i can target specific parts of the grid, run through docs

Grid versus flexbox

There are many more components that are far better to design in flexbox than grid. For example, things like buttons, navbars, forms, cards and containers and much easier to do in flexbox.

Grid is great for layouts that are super complex and have kind of box look to them. Dashboards are an example of this.

grid-fundamentals.md

Challenge 1

finish off the grid so it looks the same as what i had in figma, this is the code we ran through in the lecture

Challenge 2

recreate this business dashboard

the pie chart can just be a circle (way too hard to do it in css 😳)

note: you don't have to recreate the whole page, just the middle part

Challenge 3

recreate this health dashboard

Challenge 4

recreate this sales dashboard

Challenge 5

create a chess board (or checkers) using css grid

look up the nth-child pseudo class to get the job done

Challenge 6

re-do one of your card components in css grid

Challenge 7

recreate this website