如何使用纯CSS，HTML和JavaScript自动布局网格？

Question

Need to show a grid layout system 3 by 3 row and column card >=990px . And at >=760px This one screenshot and after <760 This screenshot .

However, I tried below code snippet:

<div id="plat-listing-main">
    <div class="section group">
        <div class="col span_1_of_3">
            This is column 1
        </div>
        <div class="col span_1_of_3">
            This is column 2
        </div>
        <div class="col span_1_of_3">
            This is column 3
        </div>
    </div>
</div> 

CSS:

/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.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 THREE  */
.span_1_of_3 {
  width: 32.2%;
  height: 200px;
  background-color: red;
}

/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
/* .span_1_of_3 {
    width: 32.2%;
} */

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 990px) {
    .col { margin: 1% 0 1% 1.6%;}
  .span_1_of_3 { width: 49.2%; }
}

@media screen and (max-width: 760px) {
    .col { margin: 1% 0 1% 1.6%;}
  .span_1_of_3 { width: 100%; }
}

Need to make this grid as much as responsive. Do not want to use Bootstrap or any other framework just to learning purpose.

ANY HELP WOULD BE APPRECIATED!!

Answer 1

I recommend that you use padding instead of margin. In order to make it work with padding, you need to put another div that has a padding and use your original div just to set the height and width of your content.

Here's an example of your code adapted with my use of padding and some width and height to adjust the div.

 .section { clear: both; padding: 0px; margin: 0px; } .col { display: block; float: left; } .span_1_of_3 { width: 32.2%; height: 200px; } .padding-div { padding: 1% 0 1% 1.6%; /*padding to make text look right*/ background-color: red; /*height and width so the divs are separated*/ height: 90%; width: 95%; } /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ @media only screen and (max-width: 990px) { .span_1_of_3 { width: 49.2%; } } @media screen and (max-width: 760px) { .span_1_of_3 { width: 100%; } } 

 <div id="plat-listing-main"> <div class="section group"> <div class="col span_1_of_3"> <div class="padding-div"> This is column 1 </div> </div> <div class="col span_1_of_3"> <div class="padding-div"> This is column 2 </div> </div> <div class="col span_1_of_3"> <div class="padding-div"> This is column 3 </div> </div> </div> </div> 

Also you can check this working example of JsFiddle here