Grid layout

PHOTO EMBED

Sun Nov 03 2024 08:58:45 GMT+0000 (Coordinated Universal Time)

Saved by @login123 

<!DOCTYPE html>
<html>
<head>
    <title>Grid Layout</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            /* Define 2 rows, first row 50% of height, second row auto */
            grid-template-rows: 1fr auto;
            gap: 20px;
            background-color: cornflowerblue;
            padding: 20px;
            height: 100vh;
            width: 100%;
        }

        .container > div {
            background-color: rgb(138, 138, 182);
            border: 1px solid black;
            padding: 20px;
            text-align: center;
            font-size: 20px;
        }

        /* Example of grid item properties */
        .item1 {
            grid-column: 1 / span 2; /* Spans across 2 columns */
            grid-row: 1; /* Positions in the first row */
        }

        .item2 {
            grid-column: 3; /* Positions in the third column */
            grid-row: 1; /* Positions in the first row */
        }

        .item3 {
            grid-column: 2 / span 2; /* Spans across columns 2 and 3 */
            grid-row: 2; /* Positions in the second row */
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">This is my first Grid Layout</h1>
    <div class="container">
        <div class="item1">
            <p>Name: S</p>
            <p>Roll No: 22B81A0</p>
            <p>Branch: CSE</p>
            <p>Section: E</p>
            <p>CGPA: 9.7</p>
        </div>
        <div class="item2">
            <p>Name: S</p>
            <p>Roll No: 22B81A0</p>
            <p>Branch: CSE</p>
            <p>Section: E</p>
            <p>CGPA: 9.0</p>
        </div>
        <div class="item3">
            <p>Name:</p>
            <p>Roll No: 22B81A0</p>
            <p>Branch: CSE</p>
            <p>Section: E</p>
            <p>CGPA: 9.5</p>
        </div>
    </div>
</body>
</html>
content_copyCOPY