Как автоматически макет сетки с использованием чистого CSS, HTML и JavaScript?

Question

Нужно показать систему разметки сетки 3 на 3 строки и столбца карты >=990px.И на >=760px Этот скриншот и после <760 Этот скриншот .

Однако я попробовал приведенный ниже фрагмент кода:

<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 здесь