Существует ли система сетки, которая использует ширину в процентах для столбцов и значения px для желобов?

Question

Я ищу сеточное решение, которое будет поддерживаться IE11, которое использует ширину столбцов в процентах и ​​желоба в пикселях.Я ищу компоновку сетки с равномерно распределенными половинками, третями, четвертями, шестыми и двенадцатыми, в которых поле может варьироваться в зависимости от точки останова.Это возможно?

@import "compass/css3";

* {
  @include box-sizing(border-box);
}

$pad: 20px;

.grid {
  background: white;
  margin: 0 0 $pad 0;

  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

[class*='col-'] {
    float: left;
  padding-right: $pad;
  .grid &:last-of-type {
    padding-right: 0;
  }
}
.col-2-3 {
    width: 66.66%;
}
.col-1-3 {
    width: 33.33%;
}
.col-1-2 {
    width: 50%;
}
.col-1-4 {
    width: 25%;
}
.col-1-8 {
    width: 12.5%;
}

.module {
  padding: $pad;
  background: #eee;
}

/* Opt-in outside padding */
.grid-pad {
  padding: $pad 0 $pad $pad;
  [class*='col-']:last-of-type {
    padding-right: $pad;
  }
}

body {
    padding: 10px 50px 200px;
  background: url(https://s.cdpn.io/3/dark_wall_@2X.png);
  background-size: 300px 300px;
}
h1 {
  color: white;
  em {
    color: #666;
    font-size: 16px;
  }
}

Крис Койер опубликовал решение, но оно немного шаткое, потому что желоба определяются правым заполнением столбцов: https://codepen.io/chriscoyier/pen/eGcLw Это означает, что ширина столбцов не точна.Например, первый столбец макета в 2 столбца будет менее 50% для учета желоба, но второй столбец будет точно равен 50% ширины сетки, поскольку в последнем дочернем элементе нет правого желоба.

У меня были некоторые проблемы с разметкой flex и grid в IE11, поэтому я планирую просто использовать плавающие элементы блока.

Answer 1

Это то, что я придумал.Я не математик, поэтому я не могу сказать вам, почему эти уравнения ширины работают или есть лучший алгоритм.

https://codepen.io/richiegarcia/pen/YBEVQR

.grid {
  margin-bottom: 20px;
  background: #8181ac;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  float: left;
  background: #cfcfcf;
  text-align: center;
  margin-right: 20px;
}

.grid [class*=col-]:last-of-type { margin-right: 0; }

.col-1-2 { width: calc(100% * 1 / 2 - 20px / 2); }
.col-1-3 { width: calc(100% * 1 / 3 - 20px / 1.5); }
.col-1-4 { width: calc(100% * 1 / 4 - 20px / 1.33); }
.col-1-6 { width: calc(100% * 1 / 6 - 20px / 1.2); }
.col-1-12 { width: calc(100% * 1 / 12 - 20px / 1.09); }

Answer 2

Окончательный код будет зависеть от типа сетки, которую вы хотите, но, возможно, это поможет вам:

.grid {
  margin-bottom: 20px;
  background: #8181ac;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

/* Let's assume that the gap = 20px */

[class*='col-'] {
  float: left;
  background: #cfcfcf;
  text-align: center;
  margin-right: 20px;
}

.grid [class*=col-]:last-of-type { margin-right: -20px; }

.col-1-2 { width: calc(100% * 1 / 2 - 20px / (2 / 1)); }

.col-1-3 { width: calc(100% * 1 / 3 - 20px / (3 / 2)); }
.col-2-3 { width: calc(100% * 2 / 3 - 20px / (3 / 1)); }

.col-1-4 { width: calc(100% * 1 / 4 - 20px / (4 / 3)); }
.col-2-4 { width: calc(100% * 2 / 4 - 20px / (4 / 2)); }

<div class="grid">
   <div class="col-1-2"><h3>1/2</h3></div>
   <div class="col-1-2"><h3>1/2</h3></div>
</div>

<div class="grid">
   <div class="col-1-3"><h3>1/3</h3></div>
   <div class="col-1-3"><h3>1/3</h3></div>
   <div class="col-1-3"><h3>1/3</h3></div>
</div>

<div class="grid">
   <div class="col-1-3"><h3>1/3</h3></div>
   <div class="col-2-3"><h3>2/3</h3></div>
</div>

<div class="grid">
   <div class="col-1-4"><h3>1/4</h3></div>
   <div class="col-1-4"><h3>1/4</h3></div>
   <div class="col-1-4"><h3>1/4</h3></div>
   <div class="col-1-4"><h3>1/4</h3></div>
</div>

<div class="grid">
   <div class="col-1-4"><h3>1/4</h3></div>
   <div class="col-2-4"><h3>2/4</h3></div>
   <div class="col-1-4"><h3>1/4</h3></div>
</div>

С синтаксисом SCSS в приведенном выше примере col width рассчитывается следующим образом:

calc(100% * #{$colSize} / #{$gridSize} - #{$gap} / (#{$gridSize} / (#{$gridSize} - #{$colSize})));

И разрывустановить с помощью margin-right на [class*='col-'].

Вы, конечно, можете написать миксин для динамического создания селекторов:

$gap: 20px;
$maxGridCol: 5;

@for $i from 1 through $maxGridCol {
   @for $y from 1 through $i {
      [class*="col-#{$y}-#{$i}"] {
         width: calc(100% * #{$y} / #{$i} - (#{$gap} / (#{$i} - #{$y})));
      }
   }
}