smart-grid-size-column-css

main.css

.item-1 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 15px;
  margin-right: 15px;
  word-wrap: break-word;
  width: -webkit-calc(8.333333333333334% - 30px);
  width: calc(8.333333333333334% - 30px);
  background-color: #BEBEBE;
}

.item-2 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 15px;
  margin-right: 15px;
  word-wrap: break-word;
  width: -webkit-calc(16.666666666666668% - 30px);
  width: calc(16.666666666666668% - 30px);
  background-color: #BEBEBE;
}

.item-3 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 15px;
  margin-right: 15px;
  word-wrap: break-word;
  width: -webkit-calc(25% - 30px);
  width: calc(25% - 30px);
  background-color: #BEBEBE;
}

.item-4 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 15px;
  margin-right: 15px;
  word-wrap: break-word;
  width: -webkit-calc(33.333333333333336% - 30px);
  width: calc(33.333333333333336% - 30px);
  background-color: #BEBEBE;
}

.item-5 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 15px;
  margin-right: 15px;
  word-wrap: break-word;
  width: -webkit-calc(41.66666666666667% - 30px);
  width: calc(41.66666666666667% - 30px);
  background-color: #BEBEBE;
}

.item-6 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 15px;
  margin-right: 15px;
  word-wrap: break-word;
  width: -webkit-calc(50% - 30px);
  width: calc(50% - 30px);
  background-color: #BEBEBE;
}

.item-7 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 15px;
  margin-right: 15px;
  word-wrap: break-word;
  width: -webkit-calc(58.333333333333336% - 30px);
  width: calc(58.333333333333336% - 30px);
  background-color: #BEBEBE;
}

.item-8 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 15px;
  margin-right: 15px;
  word-wrap: break-word;
  width: -webkit-calc(66.66666666666667% - 30px);
  width: calc(66.66666666666667% - 30px);
  background-color: #BEBEBE;
}

.item-9 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 15px;
  margin-right: 15px;
  word-wrap: break-word;
  width: -webkit-calc(75% - 30px);
  width: calc(75% - 30px);
  background-color: #BEBEBE;
}

.item-10 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 15px;
  margin-right: 15px;
  word-wrap: break-word;
  width: -webkit-calc(83.33333333333334% - 30px);
  width: calc(83.33333333333334% - 30px);
  background-color: #BEBEBE;
}

.item-11 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 15px;
  margin-right: 15px;
  word-wrap: break-word;
  width: -webkit-calc(91.66666666666667% - 30px);
  width: calc(91.66666666666667% - 30px);
  background-color: #BEBEBE;
}

.item-12 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 15px;
  margin-right: 15px;
  word-wrap: break-word;
  width: -webkit-calc(100% - 30px);
  width: calc(100% - 30px);
  background-color: #BEBEBE;
}

@media screen and (max-width: 1100px) {
  .container {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media screen and (max-width: 960px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .row {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

@media screen and (max-width: 780px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media screen and (max-width: 560px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}