Когда я смотрю на множество CSS-систем и фреймворков, они обычно имеют стандартную настройку столбцов и строк с процентной шириной. Примерно так, например:

стандартный столбец сетки:

.col-10 {
  width: 83.33333%;
  width: calc(100% / 12 * 10);
  width: -webkit-calc(100% / 12 * 10);
  width: -moz-calc(100% / 12 * 10); }

Тем не менее, в дополнение к этому, я часто вижу другие классы, такие как.push или же.pull, Например, вот так:

классы push / pull:

.push-10 {
  left: 83.33333%;
  left: calc(100% / 12 * 10);
  left: -webkit-calc(100% / 12 * 10);
  left: -moz-calc(100% / 12 * 10); }

.pull-10 {
  left: -83.33333%;
  left: calc(-100% / 12 * 10);
  left: -webkit-calc(-100% / 12 * 10);
  left: -moz-calc(-100% / 12 * 10); }

Я довольно часто использую грид-системы, но мне никогда не приходилось использовать эти классы. Возможно, потому что я не знаю, что они делают. Итак, мои вопросы:

Что обычно делает пуш-класс?Что обычно делает класс притяжения?Когда бы вы хотели использовать каждый из них?Как вы используете каждый из них?Приведите пример скрипки для демонстрации.