Creating Page Layouts w/CSS: Grid

CSCI 185, Spring 2024�Intro to Computer Programming for the Web

1

Announcements

• Tutorial 5 due tonight at midnight (Flexbox)
• Homework 4 due this Friday
• Tutorial 6: Moved to Wednesday
• You will be graded on attendance
• We will be working on challenge #3 from the homework in class
• The last day to turn in Homework 1 for a late grade is this Friday, 3/1. This is a hard deadline.
• Quiz 2 cancelled – I opted to assign a project in lieu of a quiz. We will have time in class to work on your project next week.
• Project 1a due next Friday

2

Overview of the Next Two Weeks

• Mo/We: introduce CSS Grid and do some activities + work on some of the homework together as a class.
• Fr/Mo: CSS animations and flourishes – techniques for creating engaging interfaces with more interactivity.
• We/Fr: Project 1 work in class.
• After Spring Break: Intro to programming with JavaScript

3

Outline

• Flex v. Grid
• CSS Grid rules
• Intro to HW4
• Intro to Project 1

4

Outline

• Flex v. Grid
• CSS Grid rules
• Intro to HW4
• Intro to Project 1

5

Flex v. Grid

Common to both:

• Lets you specify a few generic rules that will control how the children of a container are positioned

Flex:

• One-dimensional: allows you to arrange child elements on either a horizontal or vertical axis (controlled by the flex-direction property)
• Useful for aligning elements within a parent container

Grid:

• Two-dimensional: Gives you control over how to precisely position your boxes (grid items) in terms of both columns and rows.
• Useful for overarching page layouts

More here: Grid v. Flexbox: Which to use when?

Outline

• Flex v. Grid
• CSS Grid rules
• Intro to HW4
• Intro to Project 1

7

CSS Grid Garden

8

CSS Grid

Gives you control over how your website is laid out in both the horizontal and vertical directions.

• Key grid properties for parent (grid container):
• display (should be set to grid).
• grid-template-rows
• grid-template-columns
• row-gap and column-gap
• Key grid properties for children (grid items):
• grid-column-start
• grid-column-end (with or without span keyword)

9

Exercise 1: Create this Layout (01-columns)

10

Desktop

Tablet

Mobile

Exercise 2: Create this Layout (02-columns-rows)

11

Exercise 3: Create this Layout (03-responsive-layout-grid)

12

13

14

15

Outline

• Flex v. Grid
• CSS Grid rules
• Intro to HW4
• Intro to Project 1

16

Intro to HW4

Homework 4

• Due this Friday (4 days from today)
• The last one is tricky – we will be working on it together in class on Thursday.

17

Outline

• Flex v. Grid
• CSS Grid rules
• Intro to HW4
• Intro to Project 1

18

Project 1

Project 1

• Build a 1-page website of your choice
• Two parts
• First part due the Friday before spring break
• Second part due after Spring Break

19