Вы можете задать точные размеры, если захотите создать определенные колонки, которые будут отличаться от остальных в этом ряду. По умолчанию каждая колонка занимает оставшееся пространство равномерно, но бывают случаи, когда надо задать конкретные размеры колонки. Разметка в 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% |