CSS сетки

[Hasiev]

В css сетках есть такое понятие как колонки, во фреймворке бутстрап их кол-во равно 12, в стилях им прописывают следующие ширины: 

  Reveal hidden contents

.col-12 {
    width: 100%;
  }
  .col-11 {
    width: 91.66666667%;
  }
  .col-10 {
    width: 83.33333333%;
  }
  .col-9 {
    width: 75%;
  }
  .col-8 {
    width: 66.66666667%;
  }
  .col-7 {
    width: 58.33333333%;
  }
  .col-6 {
    width: 50%;
  }
  .col-5 {
    width: 41.66666667%;
  }
  .col-4 {
    width: 33.33333333%;
  }
  .col-3 {
    width: 25%;
  }
  .col-2 {
    width: 16.66666667%;
  }
  .col-1 {
    width: 8.33333333%;
  }

 

Так вот, откуда берутся эти ширины? Если я разделю 100% на 12 колонок, у меня действительно получится 8.33%. Но, при делении 100% на 11 колонок, у нас уже получается 9.09, а в том же бутстрапе в стилях указано: width: 16.66666667%; Так как в действительности нужно делить колонки? Мб, есть какая-то специальная формула? Спасибо!

[andrey7287]

  On 7/2/2017 at 6:13 PM, Hasiev said:

А откуда вы взяли *2? По вашей формуле действительно все считается верно .. Но можете подробней её объяснить? ))

Expand  

2 колонки

  On 7/2/2017 at 6:13 PM, Hasiev said:

То есть мы разделили 100% на кол-во колонок .. А откуда еще умножение появилось?

Expand  

Умножение появилось для того что упростить жизнь, но вы можете использовать сложение.

100 / 12 = 1 колонка

100 / 12 + 100 / 12 = 2 колонке 

Так понятнее ?

[Int]

Если смотреть математически, не зная бутстрапа, то .col-2 — это две колонки одинарной ширины. Базовых колонок не становится 11, их всё ещё 12, но одна из них (.col-2) в два раза толще обычного, то есть она занимает собой две обычных.

[AlexZaw]

100% разделить на  кол-во колонок минус margin*2

[Hasiev]

@AlexZaw То есть, - 100% / 11 = 9.09 - 30px(margin-left, margin-right). А как из процентов вычесть px? 1px это сколько %?

[AlexZaw]

width: calc(100% / 11 - 30px)

[andrey7287]

  On 7/2/2017 at 5:29 PM, Hasiev said:

Но, при делении 100% на 11 колонок, у нас уже получается 9.09, а в том же бутстрапе в стилях указано: width: 16.66666667%;

Expand  

Откуда вы взяли 11 если колонок 12 ? ( 100 / 12 * 2  = 16.6666 )

 

[Hasiev]

  On 7/2/2017 at 6:07 PM, andrey7287 said:

Откуда вы взяли 11 если колонок 12 ? ( 100 / 12 * 2  = 16.6666 )

 

Expand  

А откуда вы взяли *2? По вашей формуле действительно все считается верно .. Но можете подробней её объяснить? ))

То есть мы разделили 100% на кол-во колонок .. А откуда еще умножение появилось?

Edited July 2, 2017 by Hasiev

[Hasiev]

  On 7/2/2017 at 7:00 PM, andrey7287 said:

2 колонки

Умножение появилось для того что упростить жизнь, но вы можете использовать сложение.

100 / 12 = 1 колонка

100 / 12 + 100 / 12 = 2 колонке 

Так понятнее ?

Expand  

Не до конца, но все работает, спасибо! ))

[andrey7287]

Представьте что вам  в офис пиццу привезли, порезанную на 12 кусочков и вам её нужно поделить на троих поровну.  В результате каждый получит по 4 кусочка, 33.33333%. Если это не понятно то я не знаю ....