Klimaneutra drucken gid

by Alex

HTML

<div class="row">
  <div class="col-1">1</div>
  <div class="col-1">2</div>
  <div class="col-1">3</div>
  <div class="col-1">4</div>
  <div class="col-1">5</div>
  <div class="col-1">6</div>
  <div class="col-1">7</div>
  <div class="col-1">8</div>
  <div class="col-1">9</div>
  <div class="col-1">10</div>
  <div class="col-1">11</div>
  <div class="col-1">12</div>
</div>

CSS

html{
  --min-row-width: 1024px;
  --min-col-width: 78px;
  --min-col-margin: 3px;

  --max-row-width: 1366px;
  --max-col-width: 103px;
  --max-col-margin: 5px; 
}

@media (max-width: 1366px){
  /* 1024 */
  .row{
    width: var(--min-row-width);
    display:flex;
    background-color: #0ff;
    margin:0px;
    padding:0px;
  }
  .col-1{
    width: var(--min-col-width);
    margin: var(--min-col-margin);
    font-family: monospace;
    background-color: #f00;
  }
  .col-1:first-of-type{
    margin-left:11px;
    background-color: #f99 !important;
  }
  .col-1:last-of-type{
    margin-right:11px;
    background-color: #f99 !important;
  }
}

@media (min-width: 1366px){
  /* 1366 */
  .row{
    width: var(--max-row-width);
    display:flex;
    background-color: #0ff;
    margin:0px;
    padding:0px;
  }
  .col-1{
    width: var(--max-col-width);
    margin: var(--max-col-margin);
    font-family: monospace;
    background-color: #f00;
  }
  .col-1:first-of-type{
    margin-left:10px;
    background-color: #f99 !important;
  }
  .col-1:last-of-type{
    margin-right:10px;
    background-color: #f99 !important;
  }
}

JavaScript

307=299
270=379
270*=362
274=362
330=442
478=655
295=299


m41
m66
m63
m6
m46
m40