Your First Grid

Lesson 2: Your First Grid

I. Objective: Learn how to place items within a grid and control their size and location.

II. Topics Covered:

1. Grid Item Placement

   • Positioning grid items using grid-column and grid-row.

2. Spanning Rows and Columns

   • Using grid-column: span X; and grid-row: span Y; to make items cover multiple grid cells.

3. Named Grid Lines

   • Adding names to grid lines and placing items using grid-template-areas for clearer layout code.

III. Activity:

1. Create a 3x3 grid.

   • Place items in specific cells using grid-column-start, grid-column-end, grid-row-start, and grid-row-end.

   • Experiment with row and column spanning to create a varied layout.

IV. Homework/Practice:

• Build a card layout with four cards, where each card spans a different number of columns and rows within the grid.