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

By Robert Buseck, Margarito Valencia, zach dubroc, Jessika Hayes, Sara Dedeaux, Justin Buseck MCA-Misslou Instructor, Jonathan Pruitt WF360 Instructor, Matthew Harris, Herbert Brown, Jordan Roland, Blake Wyatt, Jim StClair, Windie Speed, Justin Buseck, Nicole Torres Mendez BHA Instructor, and WESLEY EDWARDS

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

Grid Container & Grid Items
- Turn an element into a grid container by setting display: grid;.
- Direct children of that container become grid items.
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).

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;).
Fraction Units (fr)
- fr is a flexible unit representing a portion of available space.
- Helps create fluid layouts without fixed pixel widths.
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.
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

Grid Container
- An element with display: grid;. Its children become grid items.
Grid Template Rows / Columns
- Define how many rows/columns and their sizes (e.g., 100px, auto, 1fr).
Fraction Unit (fr)
- Represents a fraction of the leftover space in the grid container.
Gap
- Spacing between rows/columns (gap: 1rem;).
Grid Row / Grid Column
- Properties for positioning items in specific rows or columns (e.g., grid-row: 1 / 2; grid-column: 2 / 4;).
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

CSS Grid + Flexbox is a common approach: Grid for overall page layout (2D), Flexbox for single-axis alignment within grid items.
Using repeat() in grid-template-columns/rows can simplify code (e.g., repeat(3, 1fr) for 3 columns).
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

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

Problem 2: Fraction Units

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

Problem 3: Spanning Rows / Columns

File Name: problem3.html
Add at least 5 .grid-items in a container with 2 rows and 3 columns.
Make one item span 2 columns, another item span 2 rows using grid-column: start / end; and grid-row: start / end;.
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.