10.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: CSS Grid is a layout system specifically designed to handle both rows and columns, making it a 2-dimensional layout system. Unlike Flexbox, which is primarily one-dimensional (either row or column), CSS Grid allows for layouts that handle both dimensions simultaneously.

   • Advantages Over Traditional Layout Methods:

     • CSS Grid provides more control over complex layouts and is more efficient for building grid-based page structures.

     • It enables positioning items precisely within a defined layout without needing additional wrappers or excessive CSS properties.

2. Defining a Grid Container

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

     • display: grid; turns a container into a block-level grid, making it the primary layout tool.

     • display: inline-grid; also creates a grid container but behaves like an inline element, affecting how it interacts with surrounding content.

3. Grid Lines and Tracks

   • Columns, Rows, and Grid Lines:

     • Grid lines are the dividing lines between grid columns and rows. They help define the "tracks" (spaces between two adjacent lines) where items are placed.

   • Defining Columns and Rows with grid-template-columns and grid-template-rows:

     • The properties grid-template-columns and grid-template-rows allow you to set the size and number of columns and rows in your grid.

     • Example: grid-template-columns: 1fr 1fr 1fr; creates three equal columns, while grid-template-rows: 100px 200px; sets the first row to 100px height and the second row to 200px.

4. The fr Unit

   • Introduction to the Fractional Unit:

     • The fr unit represents a fraction of the available space within a grid container. It’s particularly useful for creating flexible, responsive layouts.

     • Example:

     • In grid-template-columns: 1fr 2fr;, the second column will take up twice as much space as the first.

     • In grid-template-rows: 50px 100px; the second row will take up twice as much space as the first.

5. Better Ways to layout Columns and Rows in Grid

• Use repeat

  • grid-template-columns: repeat(3, 1fr); repeats a pattern three times. Each repetition creates a column with a 1fr (fractional unit) width.

  • grid-template-rows: repeat(2, 50px); repeats a pattern two times. Each repetition creates a row with a height of 50 pixels.

  • grid-template: repeat(2, 50px) / repeat(3, 1fr);