WDD 130: Web Fundamentals

CSS Layouts: Grid

Overview

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns. It has many features that make building complex layouts straightforward. The goal is for you to understand the basic features of CSS Grid and how to use them to create a layout.

Prepare

• Watch: 🎦 Grid Layout (Part 1 of 2) - (7:15 mins, Grid Layout - Part 1 Transcript)
• Watch: 🎦 Grid Layout (Part 2 of 2) - (5:59 mins, Grid Layout - Part 2 Transcript)

🗝️ Key Concept: Parent elements that contain the grid layout are given the display: grid declaration. The immediate children of that parent container are then capable of responding to grid declarations. Not the grandchildren.

Activity Instructions

1. Complete this 28 lesson tutorial on CSS Grid: Grid Garden.