Day 9 - Galleries and columns

2022-10-03

Housekeeping

Schedule update:
- Wednesday and Thursday -> CPNT 201
- Friday and Tuesday -> DSGN 270
Assignment 4
Final Project will be announced tomorrow
- Due date: Friday, Oct 14th @ 11:59pm
- This will be a group project
- Weight:
  - Peer Evaluation: 10%
  - Project: 20%
Comments and changes to Achievements Round 2

Marks for Assignment 2 will be released after lunch but here is how Tony did it:

Create a list of cards and display them as a gallery:

Take your card assignment, the answer solution to 260-a2, this starter gallery or build a new list of at least 6 cards;
Wrap your cards in a container such as a <section> element;
- Create a flex container with display: flex;
- Wrap your items with flex-wrap: wrap;
- Centre your items with justify-content: center;
- Space out your items with gap: 1rem; (or similar length);
Using your choice of flex values (and optional media queries), style a responsive gallery that:
- has 3 or more columns on wide screens;
- has only one column on mobile screens.

Questions to consider:

How wide should the items be?
Should they grow when there’s extra space?
What happens if you set the width with width or the “Flex-way” with flex-basis?

If we have time, we’ll take a look at how you can use Flexbox to create a responsive row of 3 cards.