Onsen-UIによる画面設計のTips（レイアウト）

Monacaを使って画面を作成する際に，チェックボックスを2列にしたい場合があります。たとえば，次のような画面です。

この場合，次のようなHTMLを書きます。

    <ons-list>
        <ons-list-header>症状を選択してください</ons-list-header>
        <ons-list-item>
            <ons-row>
                <ons-col>
                  <label>
                    <ons-input style="width:35px;" type="checkbox" input-id="check-1"></ons-input>
                  </label>
                  <label for="check-1">
                    不妊症
                  </label>
                </ons-col>
                <ons-col>
                  <label>
                    <ons-input style="width:35px;" type="checkbox" input-id="check-1"></ons-input>
                  </label>
                  <label for="check-2">
                    月経困難症
                  </label>
                </ons-col>
            </ons-row>
        </ons-list-item>

ポイントは，ons-rowで行をレイアウトし，その中にons-colで列をレイアウトすることです。また，チェックボックスとラベルの間に余白を入れるためにons-inputタグにwidth属性で幅を35pxに設定しています。どうも，labelタグにはwidth属性が効かない（？）みたいです。
画面レイアウトを作る際には，どの位置にどのくらいのサイズのオブジェクトを配置するかが重要になってきますが，その際，こういったことは覚えておくとよいでしょう。