css grid

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>css grid</title>

    <style>

        .grid {

            display: grid;

            /* iska matlab 4 coulumns bnao aur uska size 100px 200px 100px 150px kar do  */

            grid-template-columns: 100px 200px 100px 150px;

            grid-template-columns: 300px auto 100px;

            grid-template-columns: 1fr 4fr 1fr;

            /* iska matlab 3bar repeat karo aur size auto  */

            grid-template-columns: repeat(3, auto);

            /* iska matlab grid ke bis me 2rem ka gap aajaye  */

            grid-gap: 2rem;

        }

        .item {

            background-color: rgb(226, 9, 9);

            border: 2px solid #000;

            /* margin: 2px; */

            padding: 2px 19px;

        }

    </style>

</head>

<body>

    <div class="grid">

        <div class="item">display grid</div>

        <div class="item">display grid</div>

        <div class="item">display grid</div>

        <div class="item">display grid</div>

        <div class="item">display grid</div>

        <div class="item">display grid</div>

        <div class="item">display grid</div>

        <div class="item">display grid</div>

        <div class="item">display grid</div>

        <div class="item">display grid</div>

        <div class="item">display grid</div>

        <div class="item">display grid</div>

        <div class="item">display grid</div>

        <div class="item">display grid</div>

        <div class="item">display grid</div>

    </div>

</body>

</html>