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

【问题标题】：How to auto grid layout using pure css, HTML and javascript?如何使用纯 css、HTML 和 javascript 进行自动网格布局？
【发布时间】：2018-10-10 17:20:54
【问题描述】：

需要显示一个网格布局系统3 by 3 row and column card>=990px。在>=760pxThis one screenshot 之后<760This screenshot。

但是，我尝试了下面的代码 sn-p：

<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 或任何其他框架。

我们将不胜感激！

【问题讨论】：

标签： javascript html css gridview layout

【解决方案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 的这个工作示例

【讨论】：