Grid Min-Max

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Document</title>

    <style>

        .container{

            display: grid;

            grid-template-columns: repeat(4, 4fr);

            /* is ka matlab he jab screen chota ho jaye to shirph 1rf show kare aur uska max width: 300px; rahe; */

            grid-template-columns: repeat( auto-fit, minmax( 300px ,1fr) );

        }

        .box{

            background-color: rgb(213, 243, 41);

            padding: 19px 10px;

            margin: 1rem 2rem;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="box">box-1</div>

        <div class="box">box-2</div>

        <div class="box">box-3</div>

        <div class="box">box-4</div>

        <div class="box">box-5</div>

        <div class="box">box-6</div>

        <div class="box">box-7</div>

        <div class="box">box-8</div>

        <div class="box">box-9</div>

        <div class="box">box-10</div>  <div class="box">box-8</div>

        <div class="box">box-9</div>

        <div class="box">box-10</div>  <div class="box">box-8</div>

        <div class="box">box-9</div>

        <div class="box">box-10</div>

    </div>

</body>

</html>