Lesson Content
Recap: CSS Grid Basics
- Grid Container:
display: grid;
- Grid Items: Direct children of the grid container.
- Defining Rows and Columns:
grid-template-rows
andgrid-template-columns
- Fraction Units (
fr
): Flexible units to distribute space.
Advanced Grid Techniques
1. Spanning Grid Items
- Grid Row and Column Spanning:
grid-row
andgrid-column
: Define where a grid item starts and ends.- Syntax:
css Copy code .item { grid-column: start / end; grid-row: start / end; }
- Example:
css Copy code .item-large { grid-column: 1 / 3; /* Spans from column line 1 to 3 */ grid-row: 1 / 2; /* Occupies row 1 */ }
2. Naming Grid Areas
grid-template-areas
: Assigns names to specific areas of the grid layout.- Benefits:
- Enhances readability and maintainability.
- Simplifies the placement of grid items.
- Syntax:
css Copy code .grid-container { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }
- Visual Representation:
diff +-----------------+ | Header | +--------+--------+ | Sidebar| Main | +--------+--------+ | Footer | +-----------------+
3. Implicit Grids and Auto Placement
grid-auto-rows
andgrid-auto-columns
: Define the size of implicitly created rows and columns.grid-auto-flow
: Controls how auto-placed items are inserted into the grid.- Values:
row
(default): Fills each row in turn.column
: Fills each column in turn.dense
: Fills in holes earlier in the grid if smaller items come up.
- Values:
- Example:
css Copy code .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; grid-auto-flow: dense; gap: 10px; }
4. Responsive Grid Layouts
- Media Queries with Grid:
- Adjust grid configurations based on screen size.
- Example:
css Copy code .grid-container { display: grid; grid-template-areas: "header" "main" "footer"; grid-template-columns: 1fr; } @media (min-width: 768px) { .grid-container { grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 200px 1fr; } }
- Flexible Grid Tracks:
- Use minmax() and auto-fit/auto-fill to create responsive columns.
- Example:
css Copy code .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
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 12: Advanced CSS Grid</title> <style> .grid-container { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 200px 1fr; grid-template-rows: 60px 1fr 40px; gap: 10px; height: 100vh; } .header { grid-area: header; background-color: #4CAF50; color: white; padding: 15px; text-align: center; } .sidebar { grid-area: sidebar; background-color: #f4f4f4; padding: 15px; } .main { grid-area: main; background-color: #fff; padding: 15px; } .footer { grid-area: footer; background-color: #ddd; text-align: center; padding: 10px; } /* Responsive Adjustments */ @media (max-width: 600px) { .grid-container { grid-template-areas: "header" "main" "sidebar" "footer"; grid-template-columns: 1fr; } } /* Grid Item Spanning */ .special { grid-column: 1 / 3; /* Span across both columns */ background-color: #ffeb3b; padding: 10px; text-align: center; } </style> </head> <body> <div class="grid-container"> <div class="header">Header</div> <div class="sidebar">Sidebar</div> <div class="main"> <h2>Main Content</h2> <p>This is the main area where most content will reside.</p> <div class="special">Special Box Spanning Columns</div> </div> <div class="footer">Footer</div> </div> </body> </html>
- Grid Areas: Clearly defined sections (
header
,sidebar
,main
,footer
) enhance readability and structure. - Responsive Design: Adjusts layout for smaller screens using media queries.
- Spanning Items: The
.special
div spans across both columns, demonstrating grid item spanning.
Definition Section
- Grid Item Spanning
grid-column
andgrid-row
: Define how many columns or rows a grid item should span.- Syntax:
grid-column: start / end;
orgrid-row: start / end;
- Grid Areas
grid-template-areas
: Assigns names to specific sections of the grid layout for easier placement of grid items.grid-area
: Assigns a grid item to a named area.
- Flexibility with Fraction Units (
fr
)- Represents a fraction of the available space, allowing grid tracks to adjust dynamically based on container size.
- Implicit Grid
- Grid tracks that are automatically created by the browser when there are more items than defined in the
grid-template
.
- Grid tracks that are automatically created by the browser when there are more items than defined in the
- Responsive Grids
- Grids that adjust their layout based on screen size, ensuring usability and aesthetics across devices.
Brief History of Advanced CSS Grid
- CSS Grid Drafts (2011–2012): Initially developed by Microsoft for IE10, later standardized.
- CSS Grid Official Specification (2017): Fully adopted by modern browsers, enabling sophisticated two-dimensional layouts.
- Integration with Flexbox: Often used alongside Flexbox for one-dimensional layouts within grid items, providing a powerful combination for responsive design.
Fun Facts
- CSS Grid vs. Flexbox: CSS Grid handles both rows and columns simultaneously (2D), whereas Flexbox is primarily for one-dimensional layouts (either row or column).
- Shorthand Functions: The
repeat()
function simplifies grid definitions, e.g.,repeat(3, 1fr)
creates three equal columns. - Browser Support: CSS Grid enjoys broad support in modern browsers, but older browsers (like IE11) require vendor prefixes and have limited functionality.
Practice Problems
Create a new HTML file for each problem, applying advanced CSS Grid properties.
Problem 1: Grid Item Spanning
- File Name:
problem1.html
- Instructions:
- Create a
.grid-container
with 3 columns and 3 rows. - Add 5
.grid-item
divs. - Make one item span 2 columns and another span 2 rows using
grid-column
andgrid-row
. - Style each item with different background colors to visualize the spanning.
- Create a
- Objective: Understand how grid items can occupy multiple tracks for flexible layouts.
Problem 2: Named Grid Areas
- File Name:
problem2.html
- Instructions:
- Define a grid layout using
grid-template-areas
with sections likeheader
,nav
,main
,aside
, andfooter
. - Assign each grid item to its respective area using the
grid-area
property. - Ensure the layout adjusts gracefully on smaller screens using media queries.
- Define a grid layout using
- Objective: Learn to use named grid areas for clearer and more maintainable layouts.
Problem 3: Responsive Grid with Auto-Fit and Minmax
- File Name:
problem3.html
- Instructions:
- Create a
.grid-container
that usesgrid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
- Add multiple
.grid-item
divs (e.g., 8–12) with varying content. - Ensure the grid adjusts the number of columns based on the viewport size.
- Create a
- Objective: Implement a responsive grid that adapts to different screen widths without explicit media queries.
Assignment Submission
After completing these exercises, call Mike over for feedback on your newly created HTML and CSS solutions.