Student Activity

Student Activity:

  1. Objective: Create a 3x3 grid layout and place items in specific cells using grid placement properties.

  2. Instructions:

    • Step 1: Open a code editor and create a new HTML file called first-grid.html.

    • Step 2: In first-grid.html, set up a 3x3 grid layout using CSS Grid.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3x3 Grid Activity</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 100px);
            gap: 10px;
            border: 1px solid #333;
        }

        .grid-item {
            background-color: #4CAF50;
            color: white;
            text-align: center;
            font-size: 1em;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Position specific grid items */
        .item1 {
            grid-column: 1 / 3; /* Starts at column line 1, spans to column line 3 */
            grid-row: 1 / 2;     /* Starts at row line 1, ends at row line 2 */
        }

        .item2 {
            grid-column: 2 / 4; /* Starts at column line 2, spans to column line 4 */
            grid-row: 2 / 4;     /* Spans rows 2 and 3 */
        }

        .item3 {
            grid-column: span 2; /* Spans across 2 columns */
            grid-row: 3 / 4;     /* Starts at row line 3, ends at row line 4 */
        }

        .item4 {
            grid-area: logo;     /* Named grid area */
        }
    </style>
</head>
<body>

    <div class="grid-container">
        <div class="grid-item item1">Item 1 (Spanning 2 Columns)</div>
        <div class="grid-item item2">Item 2 (Spanning 2 Rows & 2 Columns)</div>
        <div class="grid-item item3">Item 3 (Spanning 2 Columns)</div>
        <div class="grid-item item4">Item 4 (Named Area)</div>
        <div class="grid-item">Item 5</div>
        <div class="grid-item">Item 6</div>
        <div class="grid-item">Item 7</div>
        <div class="grid-item">Item 8</div>
        <div class="grid-item">Item 9</div>
    </div>

</body>
</html>

  3. Explanation:

    • Grid Container: The .grid-container div is defined as a 3x3 grid with 3 columns and 3 rows, each row 100px in height.

    • Individual Items:

      • Item 1 spans across two columns using grid-column: 1 / 3;.

      • Item 2 spans two rows and two columns using grid-column and grid-row.

      • Item 3 spans two columns with grid-column: span 2;.

      • Item 4 uses the named area approach.

  4. Testing:

    • Open first-grid.html in a browser to see how the grid items are positioned and the effect of spanning columns and rows.

PreviousYour First GridNextHomework/Practice

Last updated