Grid: Explicit Column Sizes

You can explicitly state the size of a column if for example you'd want specific columns to be larger than the others in the same row. By default each column will evenly take up the available area, but in the case where a column should be a certain size, Ionic's grid uses a percent system (in contrast to a locked in 12 column grid).

An advantage with this grid system is that you only have to state the percentage for the column that needs it, and the others will still evenly divide up the available areas.

<divclass="row"><divclass="col col-50">.col.col-50</div><divclass="col">.col</div><divclass="col">.col</div></div><divclass="row"><divclass="col col-75">.col.col-75</div><divclass="col">.col</div></div><divclass="row"><divclass="col">.col</div><divclass="col col-75">.col.col-75</div></div><divclass="row"><divclass="col">.col</div><divclass="col">.col</div></div>

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