Introduction to CSS Grid

1. Welcome and Icebreaker:

• Icebreaker: “If you could design any website layout, what would it look like?”
• Share: Have you ever struggled to align elements in a layout? What was the most challenging part?

2. Outline the Session:

• Agenda:
  1. What is CSS Grid?
  2. Grid containers and items
  3. Defining rows and columns
  4. Placing and spanning items
  5. Responsive grid techniques
• Learning Outcomes:
  • Understand the core concepts of CSS Grid
  • Create basic and responsive grid layouts
  • Use grid properties to control placement and alignment
• Structure:
  • Theory, live coding, and hands-on practice
  • Interactive Q&A

3. Concept Explanation:

CSS Grid is a powerful two-dimensional layout system for the web. It allows you to create complex layouts easily by defining rows and columns on a parent container (the grid container), and then placing child elements (grid items) within this structure.

Key Concepts:

• Grid Container: The parent element with display: grid or display: inline-grid.
• Grid Items: The direct children of the grid container.
• Grid Lines: The dividing lines that make up the structure of the grid (both rows and columns).
• Grid Tracks: The space between two adjacent grid lines (a row or a column).
• Grid Cells: The space between two adjacent row and two adjacent column lines.
• Grid Areas: Rectangular areas made up of one or more grid cells.

Why Use CSS Grid?

• Enables complex layouts with less code
• Makes responsive design easier
• Offers precise control over placement and alignment

Common Grid Properties:

• display: grid; or display: inline-grid;
• grid-template-columns and grid-template-rows: Define the number and size of columns/rows
• gap: Sets spacing between rows and columns
• grid-column and grid-row: Control item placement and spanning
• justify-items, align-items, justify-content, align-content: Control alignment

4. Live Coding Demonstration:

Let’s build a simple grid layout and explore its features:

<style>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
  max-width: 500px;
  margin: 40px auto;
}
.item {
  background: #b3c6ff;
  padding: 20px;
  text-align: center;
  font-size: 1.2em;
  border-radius: 8px;
}
@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 80px);
  }
}
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Step-by-step:

1. Set display: grid on the container.
2. Define columns and rows with grid-template-columns and grid-template-rows.
3. Place items inside the grid.
4. Use gap for spacing.
5. Add a media query to make the grid responsive (single column on small screens).

Best Practices:

• Use fr units for flexible layouts.
• Combine CSS Grid with media queries for responsive design.
• Name grid areas for more complex layouts using grid-template-areas.
• Use auto-fit and minmax() for dynamic grids.

Common Pitfalls:

• Forgetting to set the container to display: grid.
• Not using relative units, making layouts less flexible.
• Overcomplicating layouts that could be solved with simpler grid or flexbox properties.

5. Tasks:

Exercise:

1. Create a grid with three columns and two rows.
2. Place at least four items in your grid.
3. Experiment with different gap values and observe the changes.
4. Make your grid responsive: on screens smaller than 600px, switch to a single column layout.
5. (Bonus) Try using grid-column or grid-row to make one item span two columns or rows.

Discussion:

• What advantages did you notice when using CSS Grid compared to older layout methods?
• How would you combine CSS Grid with Flexbox for more advanced layouts?