如何使用纯 css、HTML 和 javascript 自动网格布局？

Question

需要显示网格布局系统3 by 3 row and column card >=990px. And at >=760px This one screenshot and after <760 This screenshot。

但是，我尝试了以下代码片段：

<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%; }
}

需要使这个网格尽可能响应。不想仅出于学习目的使用 Bootstrap 或任何其他框架。

如有任何帮助，我们将不胜感激！！

Answer 1

我建议您使用填充而不是边距。为了使其与填充一起使用，您需要放置另一个具有填充的 div 并使用您原来的 div 来设置您的内容的高度和宽度。

这是您的代码示例，我使用填充和一些宽度和高度来调整 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>

您也可以查看 JsFiddle 的工作示例 here

如何使用纯 css、HTML 和 javascript 自动网格布局？

How to auto grid layout using pure css, HTML and javascript?

html

javascript

css

layout

gridview