CS648 Assignment 4 - CSS Grid Layout Practice

Assignment Overview

This assignment focuses on recreating three specific layouts using CSS Grid Layout. The goal is to practice and demonstrate proficiency with CSS Grid properties and techniques.

Requirements

• Use CSS Grid Layout exclusively for layout structure
• No Flexbox or float-based layouts
• Responsive design not required (fixed 960px width)
• Clean, semantic HTML structure

CSS Grid Properties Used

• display: grid
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-gap / gap
• grid-column
• grid-row
• justify-content
• align-content

Assignment Objectives

✅ Practice CSS Grid Layout syntax and properties
✅ Understand grid container and grid item relationships
✅ Implement precise layout positioning
✅ Create maintainable and semantic CSS code
✅ Match visual designs exactly