css chia khung website dang 12 cột

<!DOCTYPE html>
<html>
   <head>
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <style>
           div{
               float:left;
               padding:10px;
               box-sizing: border-box;
           }

           .col-1{
               width: 8.33%;
           }
           .col-2{
               width: 16.66%;
           }
           .col-3{
               width: 25%;
           }
           .col-4{
               width: 33.33%;
           }
           .col-5{
               width: 41.66%;
           }
           .col-6{
               width: 50%;
           }

           .col-7{
               width: 58.33%;
           }
           .col-8{
               width: 66.66%;
           }
           .col-9{
               width: 75%;
           }

           .col-10{
               width: 83.33%;
           }
           .col-11{
               width: 91.66%;
           }
           .col-12{
               width: 100%;
           }


           @media only screen and (max-width: 700px) {
               div{
                   padding:1px;
               }
               .col-sm-1{
               width: 8.33%;
               }
               .col-sm-2{
                   width: 16.66%;
               }
               .col-sm-3{
                   width: 25%;
               }
               .col-sm-4{
                   width: 33.33%;
               }
               .col-sm-5{
                   width: 41.66%;
               }
               .col-sm-6{
                   width: 50%;
               }

               .col-sm-7{
                   width: 58.33%;
               }
               .col-sm-8{
                   width: 66.66%;
               }
               .col-sm-9{
                   width: 75%;
               }

               .col-sm-10{
                   width: 83.33%;
               }
               .col-sm-11{
                   width: 91.66%;
               }
               .col-sm-12{
                   width: 100%;
               }
           }


       </style>
   </head>
   <body>
       <div class="col-md-12" style="background:red; height:50px;" >
           header
       </div>

       <div class="col-md-12" style="">
           <div class="col-md-1 col-sm-12">
           </div>
           <div class="col-md-10 col-sm-12" >
                   <div class="col-2 col-sm-4">
                       menu
                   </div>
                   <div class="col-md-8 col-sm-8">
                       <img src="https://cdn.cellphones.com.vn/media/ltsoft/promotion/tlhw690-300-max.png" style="width:100%"/>
                   </div>
                   <div class="col-md-2 col-sm-12">
                       Image
                   </div>
           </div>
           <div class="col-md-1 col-sm-12">
           </div>
       </div>

       <div class="col-12" style="background:blue">
           Footer
       </div>
   </body>
</html>

ANHPHUONGIT.com

Code mẫu

css chia khung website dang 12 cột