Lecture_10_CSS Grid Fundamentals & Responsive Design

Lesson 1: CSS Grid Fundamentals

I. Objective: Understand the basic principles of CSS Grid and how it differs from other layout techniques like Flexbox.

II. Topics Covered:

1. What is CSS Grid?

   • Introduction to CSS Grid as a 2-dimensional layout system.

   • Advantages over traditional layout methods.

2. Defining a Grid Container

   • display: grid; vs. display: inline-grid;

3. Grid Lines and Tracks

   • Columns, rows, and grid lines.

   • Defining columns and rows using grid-template-columns and grid-template-rows.

4. The fr Unit

   • Introduction to the fractional unit and its role in responsive grids.

III. Activity:

1. Create a simple grid container with three columns and two rows.

   • Set up grid-template-columns: 1fr 1fr 1fr; and grid-template-rows: 100px 200px;.

   • Add items to the grid and observe how they fill the grid cells.

IV. Homework/Practice:

• Build a four-column layout using CSS Grid, adjusting column widths with different fractional values (e.g., 1fr, 2fr, 3fr, 1fr).