index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BootStrap Grid System</title>
    <link rel="shortcut icon" href="./favicon.png" type="image/x-icon">

<!-- -----------------Bootstrap CSS-------------------- -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- -----------------Vanilla CSS-------------------- -->
    <link rel="stylesheet" href="style.css">
</head>
 <div class="container-fluid">
    <div class="row  g-3">
        <div  class="col-12 col-lg-12 col-xl-12 col-xxl-12   ">
            <div class="p-5 bg-danger-subtle"></div>
        </div>

        <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3">
            <div class="bg-pink p-5"></div>
         </div>
 
         <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3">
            <div class="bg-pink p-5"></div>
         </div>
 
         <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3">
            <div class="bg-pink p-5"></div>
         </div>
 
         <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3">
            <div class="bg-pink p-5 "></div>
         </div>


         <div  class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
            <div class="bg-info-subtle p-5 "></div>
         </div>


         <div  class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
            <div class="bg-info-subtle p-5 "></div>
         </div>

         <div  class="col-12 col-sm-12 col-md-12 col-lg-9 col-xl-9 col-xxl-9">
            <div class="bg-light-green p-5 "></div>
         </div>

         <div  class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3">
            <div class="bg-drown p-5 "></div>
         </div>


      </div>


    </div>
 </div>
    
</body>
</html>