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.
- Turn an element into a grid container by setting
- Defining Rows & Columns
grid-template-rows
andgrid-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
(orrow-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
andgrid-auto-columns
.
- Explicit: Defined using
- 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 shorthandgrid-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.
- An element with
- Grid Template Rows / Columns
- Define how many rows/columns and their sizes (e.g.,
100px
,auto
,1fr
).
- Define how many rows/columns and their sizes (e.g.,
- Fraction Unit (fr)
- Represents a fraction of the leftover space in the grid container.
- Gap
- Spacing between rows/columns (
gap: 1rem;
).
- Spacing between rows/columns (
- Grid Row / Grid Column
- Properties for positioning items in specific rows or columns (e.g.,
grid-row: 1 / 2; grid-column: 2 / 4;
).
- Properties for positioning items in specific rows or columns (e.g.,
- 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()
ingrid-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 (usegrid-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., ingrid-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-item
s 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;
andgrid-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.