WDD 130: Web Fundamentals

CSS Layouts: Grid

Overview

CSS Grid Layout is a two-dimensional layout system for the web that allows you to arrange content content in rows and columns. It includes 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 layouts.

Prepare

• Video: ▶️ Grid Layout (Part 1 of 2) - (7:15 mins, Grid Layout - Part 1 Transcript)
• Video: ▶️ Grid Layout (Part 2 of 2) - (5:59 mins, Grid Layout - Part 2 Transcript)

Parent elements that contain a grid layout are given the display: grid declaration. The immediate children of that parent container can then respond to grid declarations (but grandchildren cannot).

Activity Instructions

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