Galleries with Flexbox and CSS Grid

In this session, we'll use Flexbox and CSS Grid to achieve responsive gallery layouts.

Housekeeping

Daily Standup

In the same groups as last class

Each person takes a turn to answer the following questions:

  1. What did you do yesterday?
  2. What will you do today?
  3. Anything blocking your progress?

Video Watch party day!

1. Flex vs Grid

Flexbox vs. CSS Grid — Which is Better?

2. Introduction to CSS Grid

Defining a Grid

Activity: 2-up, 4-up

Materials

In groups of 2 or 3, build 2 grid layouts:

  1. Make a split-hero section: fill the page with two items with different background colours, side-by-side.
  2. Refactor your code to be a 2x2 grid.

Demo: Image gallery

Materials

Starter Code

Today's Achievement

Game board

Using CSS Grid, build ONE of the following:

An empty Tic-Tac-Toe grid: Tic Tac Toe Board

  • Starter Code
  • 3x3 grid of squares
  • Borders between each square
  • Optional: Add static, centred “X” and “O” content in some or all of the squares

OR

Chess board: Chess Board

  • Starter Code
  • 8x8 grid of squares
  • Each square alternates colours like a chess board
    • hint: the nth-child(even) selector might come in handy
  • Optional: Add static, centred “X” and “O” content in some or all of the squares

OR

Some other layout that demonstrates the knowledge you learned today.

Criteria

Points will be awarded for layouts that:

  • Use CSS Grid;
  • Incorporate non-grid CSS such as borders, backgrounds, size control (i.e. squares, hero section, etc);
  • Show originality.

Submission Instructions

Submit your GH repo and Pages links to the Dropbox in Brightspace.

Lesson Prep

Reading list

Watch list

Digging deeper (optional)