Lab 8 (Session 3) — CSS Grid & Sprite Animation

Master CSS Grid for Responsive Layouts & Sprite Animation (≈ 90 min)

Overview

This lab introduces two fundamental techniques for modern web development: CSS image sprites for performance optimization, and responsive design using media queries for multi-device compatibility. Students will learn how to reduce HTTP requests using sprite sheets and create adaptive layouts that work seamlessly across desktop, tablet, and mobile devices.

Duration: Approximately 90 minutes

Learning Objectives

By the end of this lab, students will be able to:

  • Understand the benefits of CSS sprites for web performance optimization.
  • Implement CSS sprites using background-image and background-position.
  • Calculate and apply precise positioning for sprite elements.
  • Write media queries for responsive breakpoints (mobile, tablet, desktop).
  • Create flexible layouts using flexbox and percentage-based widths.
  • Implement a responsive navigation menu that adapts to screen size.
  • Apply mobile-first design principles.
  • Use @media rules to adjust typography, spacing, and layout.

Task 1 — Animated Running Character with CSS Sprites

Understanding CSS Sprite Animation

CSS sprites combine multiple animation frames into a single image file. By changing the background-position over time using CSS @keyframes, we can create smooth character animations. Our sprite sheet (sprites.png) contains 6 frames of a running character (465×134px total, each frame is ~77.5px wide).

💡 Tip: View sprites.png to see all 6 running frames.

Task Instructions

  1. Style .sprite-container:
    • Set display: flex, justify-content: center, align-items: center
    • Set min-height: 200px
    • Add gradient background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
    • Add border-radius: 12px and padding: 40px
  2. Style .running-character:
    • Set width: 76px and height: 134px
    • Set background-image: url('images/sprites.png')
    • Set background-repeat: no-repeat
    • Add overflow: hidden (clips to show only one frame)
    • Add animation: run 0.8s steps(1) infinite (steps(1) prevents smooth sliding)
  3. Create @keyframes run animation:
    • At 0%: background-position: 0 0
    • At 16.66%: background-position: -78px 0
    • At 33.33%: background-position: -156px 0
    • At 50%: background-position: -234px 0
    • At 66.66%: background-position: -312px 0
    • At 83.33%: background-position: -390px 0
    • At 100%: background-position: 0 0

🔧 Fine-Tuning Tips

If frames don't align perfectly, adjust positions by ±1-2px:

  • Check if the character's feet stay at the same vertical level
  • Adjust each keyframe's X position until smooth
  • Each frame is approximately 76px apart

Key Learning Points:

  • CSS Animation: @keyframes defines how the background position changes over time
  • steps(1) Function: Makes animation jump to each frame instantly, no smooth sliding between frames
  • Manual Positioning: Each frame is positioned individually for precise control (works with uneven sprite sheets!)
  • Animation Speed: 0.8 seconds per cycle creates a natural running motion
  • Performance: 1 sprite sheet loads faster than 6 separate images
  • infinite: Makes the animation loop continuously

🎬 Animation Breakdown: The steps(1) function makes the animation jump from frame to frame instantly (no smooth sliding). Each keyframe percentage (0%, 16.66%, 33.33%, etc.) displays one specific frame by shifting the background position. This creates crisp, frame-by-frame animation like a cartoon!

Task 2 — Responsive Layouts with CSS Grid

Auto-Responsive Grid Gallery

Learn to create responsive layouts using CSS Grid that automatically adapt without media queries. You'll use powerful Grid functions like auto-fit, minmax(), and grid-template-areas to build flexible, maintainable layouts that work on any screen size.

Key CSS Grid Properties

  • display: grid — Enables CSS Grid layout
  • grid-template-columns — Defines column structure
  • auto-fit / auto-fill — Automatically creates columns
  • minmax() — Sets minimum and maximum sizes
  • gap — Spacing between grid items

Part A: Auto-Responsive Grid Gallery Container

  1. For .grid-gallery, add display: grid; to enable grid layout.
  2. For .grid-gallery, add grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));.
  3. This creates columns that auto-adjust: minimum 250px wide, maximum 1 fraction of available space.
  4. For .grid-gallery, add gap: 20px; for spacing between items.
  5. For .grid-gallery, add padding: 20px;, background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);.
  6. For .grid-gallery, add border-radius: 12px;.

Part B: Grid Item Styling

  1. For .grid-item, add background: white; and border-radius: 12px;.
  2. For .grid-item, add padding: 30px; and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);.
  3. For .grid-item, add transition: transform 0.3s ease;.
  4. For .grid-item:hover, add transform: translateY(-5px); and box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);.

Part C: Grid Item Content

  1. For .grid-item h3, add color: #667eea;, margin: 0 0 12px 0;, and font-size: 1.5rem;.
  2. For .grid-item p, add color: #64748b;, line-height: 1.6;, and margin: 0;.

Part D: Magazine Layout with Grid Areas

  1. For .magazine-grid, add display: grid;.
  2. For .magazine-grid, add grid-template-columns: repeat(4, 1fr); (4 equal columns).
  3. For .magazine-grid, add grid-template-rows: auto;.
  4. For .magazine-grid, add gap: 20px;, margin-top: 40px;, padding: 20px;.
  5. For .magazine-grid, add background: #f8fafc;, border-radius: 12px;.

Part E: Featured Item (Spans Multiple Cells)

  1. For .featured-item, add grid-column: span 2; (takes 2 columns).
  2. For .featured-item, add grid-row: span 2; (takes 2 rows).
  3. For .featured-item, add background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);.
  4. For .featured-item, add color: white;, padding: 40px;, border-radius: 12px;.
  5. For .featured-item, add display: flex;, flex-direction: column;, justify-content: center;.

Part F: Regular Magazine Items

  1. For .magazine-item, add background: white;, padding: 24px;, border-radius: 12px;.
  2. For .magazine-item, add box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);.
  3. For .magazine-item, add transition: transform 0.3s ease;.
  4. For .magazine-item:hover, add transform: scale(1.02);.

Part G: Media Query - Tablet Grid

  1. Create media query: @media (max-width: 1024px).
  2. Inside, for .magazine-grid, change grid-template-columns to repeat(2, 1fr) (2 columns).
  3. Inside, for .featured-item, keep grid-column: span 2; but change grid-row: span 1;.

Part H: Media Query - Mobile Grid

  1. Create media query: @media (max-width: 767px).
  2. Inside, for .magazine-grid, change grid-template-columns to 1fr; (single column).
  3. Inside, for .featured-item, change both grid-column and grid-row to span 1;.
  4. Inside, for .grid-item, change padding to 20px;.

Demo 1: Auto-Responsive Grid

This grid automatically adjusts columns based on available space - no media queries needed!

Auto-Fit Magic

Grid automatically creates as many columns as fit, minimum 250px each.

No Media Queries

Responsive behavior built right into the grid-template-columns property.

Minmax Function

Sets minimum width (250px) and maximum (1fr = equal distribution).

Equal Heights

Grid items automatically align to same height in each row.

Perfect Gaps

Gap property handles spacing better than margins.

Flexible

Resize your browser to see columns adjust automatically!

Demo 2: Magazine Layout with Grid Areas

Featured item spans multiple grid cells for emphasis.

Featured Article

This item spans 2 columns and 2 rows, creating visual hierarchy in the layout.

Tech News

Latest updates in technology and innovation.

Design Tips

Best practices for modern web design.

Development

Code tutorials and frameworks.

Performance

Optimize your web applications.

Security

Protect your users and data.

Accessibility

Build inclusive web experiences.

Key Learning Points:

  • auto-fit: Automatically creates as many columns as fit in the container width.
  • minmax(250px, 1fr): Each column is minimum 250px, maximum equal distribution.
  • No Media Queries Needed: Grid's auto-fit with minmax creates responsive behavior automatically.
  • Grid Spanning: Use grid-column: span 2 to make items take multiple cells.
  • Equal Heights: Grid items in the same row automatically have equal height.
  • Gap Property: Cleaner than margins - creates consistent spacing between all items.
  • Grid vs Flexbox: Grid excels at 2D layouts (rows AND columns), Flexbox for 1D (single direction).
  • Fractional Units (fr): 1fr means "1 fraction of available space" - perfect for equal distribution.

🧪 Testing Tip: Resize your browser window to see the Grid automatically reflow! The auto-fit grid adjusts column count automatically, while the magazine layout uses media queries for breakpoints.

Questions to Answer

Please answer the following questions based on your understanding of the tasks. Write your answers in the designated areas below:

📝 Important: Write your answers directly in the HTML source code by editing the content inside the <p> tags within each answer box below. Replace the placeholder text with your own answers.

Question 1: CSS Sprite Animation Benefits

In Task 1 (CSS Sprite Animation), explain why using sprite sheets for animation is better than using multiple separate image files. Discuss at least two advantages in terms of performance and implementation.

Your Answer:

Type your answer here...

Sprite sheets will contain multiple frames of animation in single file.
It will reduce the mumber of draw call.
The application can change the coordinates to display different frams of animation, which renders faster.
It also provide a easier way to track resources(animations or frames) in one place, and easier to synchronize timing

Question 2: CSS Grid auto-fit with minmax()

Explain how grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) creates a responsive grid without needing media queries. What do auto-fit and minmax() do?

Your Answer:

Type your answer here...

"repeat(auto-fit, minmax(250px, 1fr))" allows the grid to automatically adjust the number of columns based on the available space in the container.
"auto-fit" adjust the number of columns based on the container space.
"minmax(250px, 1fr)" defines the column width range from "250px" to "1fr"(all available space)

What to Submit

Upload the following to the BB:

  • index.html and styles.css (with your answers to the questions filled in)
  • images folder containing the sprites.png file
  • 3 screenshots showing:
    • Task 1: Animated running character (capture showing the animation)
    • Task 2: Responsive layout on desktop view (wide browser window)
    • Task 2: Responsive layout on mobile view (narrow browser window < 768px)

Note: Make sure to test your responsive design by resizing your browser window. The navigation should stack vertically and cards should display in a single column on mobile screens.