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:

  .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.