Разметка: заданные размеры колонок

Вы можете задать точные размеры, если захотите создать определенные колонки, которые будут отличаться от остальных в этом ряду. По умолчанию каждая колонка занимает оставшееся пространство равномерно, но бывают случаи, когда надо задать конкретные размеры колонки. Разметка в Ionic использует процентную систему в отличие от фиксированной разметки с 12 колонками.

Преимущество платформы Ionic заключается в том, что Вам требуется указать процент только для конкретной колонки, остальные равномерно поделят между собой оставшееся пространство.

 

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Note: The borders and gray background in the demo were added so it's easier to see the structure.

Explicit Column Percentage Classnames
.col-10	10%
.col-20	20%
.col-25	25%
.col-33	33.3333%
.col-50	50%
.col-67	66.6666%
.col-75	75%
.col-80	80%
.col-90	90%