# Homework/Practice

**Homework/Practice:**

* **Objective:**\
  Practice using CSS Grid properties to create a card layout with multiple cards, each spanning different columns and rows.
* **Instructions:**
  * Create an HTML file with a `.card-container` class that defines a 3x4 grid.
  * Each card should span different rows and columns for a varied layout.
  * Use `grid-column`, `grid-row`, `grid-column: span X;`, and `grid-row: span Y;` for the placement.
* **Example CSS for the Practice Layout:**

  ```css
  .card-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 150px);
      gap: 15px;
  }

  .card {
      background-color: #2196F3;
      color: white;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1em;
  }

  .card1 {
      grid-column: span 2;
      grid-row: span 1;
  }

  .card2 {
      grid-column: 3 / 5;
      grid-row: 1 / 3;
  }

  .card3 {
      grid-column: span 2;
      grid-row: span 2;
  }
  ```

By completing this lesson and activity, students will understand how to place items within a grid layout, control their position, and use spanning techniques effectively to create visually diverse designs.
