You can use this lesson in your class!
Day 11: CSS Grid Basics—Rows, Columns, and Grid-Template
Completed

Day 11: CSS Grid Basics—Rows, Columns, and Grid-Template

Lesson Content

Why CSS Grid?

CSS Grid is a powerful two-dimensional layout system, allowing you to control columns and rows simultaneously. It’s more intuitive for complex layouts than older techniques (floats, positioning, or even Flexbox, which is primarily one-dimensional).

Key Concepts

  1. Grid Container & Grid Items
    • Turn an element into a grid container by setting display: grid;.
    • Direct children of that container become grid items.
  2. Defining Rows & Columns
    • grid-template-rows and grid-template-columns specify the number and sizes of rows/columns.
    • Example:
css
Copy code
.grid-container {
  display: grid;
  grid-template-rows: 100px 200px;
  grid-template-columns: 1fr 2fr;
}
      • Creates 2 rows (first 100px high, second 200px)
      • And 2 columns (first column is 1 fraction unit, second is 2 fraction units).
  1. Grid Tracks & Gaps
    • Tracks: The horizontal or vertical lines bounding rows and columns.
    • gap (or row-gap, column-gap) property sets space between grid items (e.g., gap: 1rem;).
  2. Fraction Units (fr)
    • fr is a flexible unit representing a portion of available space.
    • Helps create fluid layouts without fixed pixel widths.
  3. Implicit vs. Explicit Grid
    • Explicit: Defined using grid-template-rows / grid-template-columns.
    • Implicit: Rows or columns automatically created by the browser if not explicitly defined.
    • You can control how implicitly created tracks are sized using properties like grid-auto-rows and grid-auto-columns.
  4. Placing Items
    • By default, items flow into the grid from left to right, top to bottom.
    • You can explicitly position items with properties like grid-row, grid-column, or the shorthand grid-area.

HTML + CSS Example

html
Copy code
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Week 5, Day 11: CSS Grid Basics</title>
    <style>
      .grid-container {
        display: grid;
        /* 2 rows: first is 150px tall, second automatically sized
           3 columns: each 1 fraction unit of remaining space */
        grid-template-rows: 150px auto;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
        height: 100vh; /* just for demo */
        margin: 0 auto;
        max-width: 800px;
        background-color: #f4f4f4;
        padding: 1rem;
      }

      .grid-item {
        background-color: lightblue;
        border: 2px solid #333;
        display: flex; 
        align-items: center; 
        justify-content: center;
        font-size: 1.2rem;
      }
      /* Example positioning for one item */
      .item-special {
        grid-column: 1 / 3; /* spans from col 1 to col 2 */
        grid-row: 2;       /* occupies the second row only */
        background-color: lightcoral;
      }
    </style>
  </head>
  <body>
    <h1>CSS Grid Basics Example</h1>
    <div class="grid-container">
      <div class="grid-item">Item A</div>
      <div class="grid-item">Item B</div>
      <div class="grid-item">Item C</div>
      <div class="grid-item item-special">Special Item (spanning columns 1-2)</div>
      <div class="grid-item">Item D</div>
    </div>
  </body>
</html>
  • display: grid;: Creates a grid container.
  • grid-template-rows: 150px auto;: First row is 150px, second row size is determined by its content.
  • grid-template-columns: 1fr 1fr 1fr;: Three equal-width columns that share available space.
  • .item-special { grid-column: 1 / 3; }: Spans from column 1 to column 2 (thus 2 columns total).

Definition Section

  1. Grid Container
    • An element with display: grid;. Its children become grid items.
  2. Grid Template Rows / Columns
    • Define how many rows/columns and their sizes (e.g., 100px, auto, 1fr).
  3. Fraction Unit (fr)
    • Represents a fraction of the leftover space in the grid container.
  4. Gap
    • Spacing between rows/columns (gap: 1rem;).
  5. Grid Row / Grid Column
    • Properties for positioning items in specific rows or columns (e.g., grid-row: 1 / 2; grid-column: 2 / 4;).
  6. Explicit / Implicit Grid
    • Tracks (rows/columns) that are explicitly defined vs. automatically created if items overflow.

Brief History of CSS Grid

  • Early Web Layouts: Relied on tables, floats, or flexbox for layout.
  • CSS Grid Drafts (2011–2012): Initially developed by Microsoft for IE10.
  • Standardization (2017): Fully adopted by modern browsers, quickly becoming a key layout method for two-dimensional designs.

Fun Facts

  1. CSS Grid + Flexbox is a common approach: Grid for overall page layout (2D), Flexbox for single-axis alignment within grid items.
  2. Using repeat() in grid-template-columns/rows can simplify code (e.g., repeat(3, 1fr) for 3 columns).
  3. minmax() allows you to set a range for track sizing (e.g., grid-template-columns: repeat(3, minmax(200px, 1fr));).

Practice Problems

Create a new HTML file for each problem, focusing on basic Grid properties.

Problem 1: Simple 2D Grid

  1. File Name: problem1.html
  2. Create a .grid-container with 2 rows and 3 columns (use grid-template-rows, grid-template-columns).
  3. Place 6 .grid-item divs.
  4. Set a small gap (e.g., gap: 0.5rem;) to see spacing.

Problem 2: Fraction Units

  1. File Name: problem2.html
  2. Use 1fr, 2fr, 3fr, etc., in grid-template-columns for a dynamic width.
  3. Observe how each column grows/shrinks based on available space.
  4. Style each item with different background colors to visualize the distribution.

Problem 3: Spanning Rows / Columns

  1. File Name: problem3.html
  2. Add at least 5 .grid-items in a container with 2 rows and 3 columns.
  3. Make one item span 2 columns, another item span 2 rows using grid-column: start / end; and grid-row: start / end;.
  4. Write a short note describing how spanning works for layout flexibility.

Assignment Submission

After completing these exercises, call Mike over for feedback on your newly created HTML and CSS solutions.