"responsive grid system"
Bootstrap 4.1.1 Snippet by prakash27dec

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!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"> <title>gird_box</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="section group"> <div class="col span_2_of_2"> This is column 12 </div> </div> <div class="section group"> <div class="col span_1_of_2"> This is column 6 </div> <div class="col span_1_of_2"> This is column 6 </div> </div> <div class="section group"> <div class="col span_1_of_4"> This is column 3 </div> <div class="col span_1_of_4"> This is column 3 </div> <div class="col span_1_of_4"> This is column 3 </div> <div class="col span_1_of_4"> This is column 3 </div> </div> <div class="section group"> <div class="col span_1_of_3"> This is column 4 </div> <div class="col span_1_of_3"> This is column 4 </div> <div class="col span_1_of_3"> This is column 4 </div> </div> </body> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </html>
/* SECTIONS */ .section {clear: both;padding: 0px;margin: 0px;} /* COLUMN SETUP */ .col {display: block;float:left;margin: 1% 0 1% 1.6%;text-align: center;background: grey;} .col:first-child { margin-left: 0; } /* GROUPING */ .group:before, .group:after { content:""; display:table; } .group:after { clear:both;} .group { zoom:1; /* For IE 6/7 */ } /* GRID OF TWO */ .span_2_of_2 {width: 100%;background:orange;} .span_1_of_2 {width: 49.2%;background:green;} /* GRID OF THREE */ .span_3_of_3 { width: 100%; } .span_2_of_3 { width: 66.13%; } .span_1_of_3 { width: 32.26%;background:lime;} /* GRID OF FOUR */ .span_4_of_4 {width: 100%;} .span_3_of_4 {width: 74.6%;} .span_2_of_4 {width: 49.2%;} .span_1_of_4 {width: 23.8%;background:tomato;} /* GO FULL WIDTH BELOW 480 PIXELS */ @media only screen and (max-width: 480px) { .col { margin: 1% 0 1% 0%; } .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; } } @media only screen and (max-width: 480px) { .span_2_of_2, .span_1_of_2 { width: 100%; } } /* GO FULL WIDTH BELOW 480 PIXELS */ @media only screen and (max-width: 480px) { .col { margin: 1% 0 1% 0%; } .span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; } } @media only screen and (max-width: 992px) { .span_1_of_2 {width: 100%;margin-left: 0;} .span_1_of_4 {width: 49.2%;} .span_1_of_4:nth-child(3) {margin-left: 0;} } @media only screen and (max-width: 768px) { .span_1_of_4 {width: 100%;margin-left: 0;} .span_1_of_3 {width: 100%;margin-left: 0;} }

Related: See More


Questions / Comments: