.container{
    width:100%;
    max-width:1200px;
    margin: auto;
}
.row{
    display: flex;
    flex-wrap: wrap;
}
.col-1{
    width:calc(100% / 12 *1);
}
.col-2{
    width:calc(100% / 12 *2);
}
.col-3{
    width:calc(100% / 12 *3);
}
.col-4{
    width:calc(100% / 12 *4);
}
.col-5{
    width:calc(100% / 12 *5);
}
.col-6{
    width:calc(100% / 12 *6);
}
.col-7{
    width:calc(100% / 12 *7);
}
.col-8{
    width:calc(100% / 12 *8);
}
.col-9{
    width:calc(100% / 12 *9);
}
.col-10{
    width:calc(100% / 12 *10);
}
.col-11{
    width:calc(100% / 12 *11);
}
.col-12{
    width:calc(100% / 12 *12);
}

/* 下面程式碼意指
class名稱的開頭為col的話
其padding設定為15px
*/
[class^="col"]{
    padding: 15px;
}
/* 
   ^= 開頭
   $= 結尾
   *= 包含
*/