【グリッドシステムを使うことのメリット】

グリッドシステムを使うメリットとして異なるデバイス(PCやモバイル端末など)でも画面崩れしないレイアウトを作成することが出来ます。
シンプルな構造なので使いまわしが可能で、メンテナンスが容易です。

【Bootstrapと異なる点：rowの代わりにColumnsクラスを使う】

rowクラスの代わりにColumnsクラスを使って作成します。

【グリッドシステムの構成と手順】

①外枠に『箱』であるcontainerクラスをあててコンテンツを入れる区画を作る。
②箱ができたら、『行』であるcolumnsクラスをあててヨコを分割する。
③行ができたら、『列』であるcolumnクラスをあててタテに分割する。

【手順】

①containerクラスを使う。
②columnsクラスを使う。
③column is-〇〇　※〇〇は数字が入る

sample.html

<!DOCTYPE html>
<head>
    <title>グリッドシステムを使ったフォーム画面</title>
    <!--fontawesomeをCDN経由で取得する。-->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <!--bulmaをCDN経由で取得する。-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
    <div class="container">
        <div class="columns">
            <!--画面を2分割(is-6プロパティを使う)して、名前（姓）エリアを作る。-->
            <div class="column is-6">
                <!--fieldプロパティでラベルと入力欄をグループ化する-->
                <div class="field">
                    <!--名前（姓）ラベルエリア-->
                    <div class="nameSeiLabelArea">
                        <label class="label">名前（姓）</label>
                    </div>
                    <!--名前（姓）入力エリア-->
                    <div class="control nameSeiInputArea has-icons-left has-icons-right">
                        <!--inputタグ属性と枠線の配色を設定する(例：input is-success)-->
                        <input class="input nameSeiInput is-success" type="text" placeholder="姓" />
                        <span class="icon is-small is-left">
                            <i class="fas fa-user"></i>
                        </span>
                        <span class="icon is-small is-right">
                            <i class="fas fa-check"></i>
                        </span>
                    </div>
                </div>
            </div>
            <!--画面を2分割(is-6プロパティを使う)して、名前（名）エリアをつくる。-->
            <div class="column is-6">
                <!--fieldプロパティでラベルと入力欄をグループ化する-->
                <div class="field">
                    <!--名前（名）ラベルエリア-->
                    <div class="nameMeiArea">
                        <label class="label">名前（名）</label>
                    </div>
                    <!--名前（名）入力エリア-->
                    <div class="control nameMeiInputArea has-icons-left has-icons-right">
                        <!--inputタグ属性と枠線の配色を設定する(例：input is-success)-->
                        <input class="input nameMeiInput is-success" type="text" placeholder="名" />
                        <span class="icon is-small is-left">
                            <i class="fas fa-user"></i>
                        </span>
                        <span class="icon is-small is-right">
                            <i class="fas fa-check"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!--住所、電話番号、E-mailを並列に表示する-->
        <div class="columns">
            <!--画面を3分割(is-4プロパティを使う)する。-->
            <!--【住所】：fieldプロパティでラベルと入力欄をグループ化する。-->
            <div class="column is-4">
                <div class="field">
                    <div class="addressLabelArea">
                        <label class="label">住所</label>
                    </div>
                    <div class="control addressInputArea">
                        <!--inputタグ属性と枠線の配色を設定する(例：input is-success)-->
                        <input class="input addressInput is-success" type="text" placeholder="住所"/>
                    </div>
                    
                </div>
            </div>
            <!--画面を3分割(is-4プロパティを使う)する。-->
            <!--【電話番号】：fieldプロパティでラベルと入力欄をグループ化する。-->
            <div class="column is-4">
                <div class="field">
                    <div class="telLabelArea">
                        <label class="label">電話番号</label>
                    </div>
                    <div class="control telArea">
                        <!--inputタグ属性と枠線の配色を設定する(例：input is-success)-->
                        <input class="input telInput is-success" type="text" placeholder="0120-123-4567" />
                    </div>
                </div>
            </div>
            <!--画面を3分割(is-4プロパティを使う)する。-->
            <!--【E-mail】：fieldプロパティでラベルと入力欄をグループ化する。-->
            <div class="column is-4">
                <div class="field">
                    <div class="emailLabelArea">
                        <label class="label">E-mail</label>
                    </div>
                    <div class="control emailInputArea">
                        <!--inputタグ属性と枠線の配色を設定する(例：input is-success)-->
                        <input class="input emailInput is-success" type="email" placeholder="emailTaro@emailtaro.com" />
                    </div>
                </div>
            </div>
        </div>
        <!--ドロップダウンリスト、チェックボックス、ラジオボタンを並列に表示する-->
        <div class="columns">
            <!--画面を3分割(is-4プロパティを使う)する。-->
            <div class="column is-4">
                <div class="field">
                    <div class="selectOptionArea">
                        <label class="label">選択オプション</label>
                    </div>
                    <div class="control selectBoxArea">
                        <div class="select">
                            <select>
                                <option>選択１</option>
                                <option>選択２</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <!--画面を3分割(is-4プロパティを使う)する。-->
            <div class="column is-4">
                <div class="field">
                    <div class="checkboxArea">
                        <label class="label">チェックボックス</label>
                    </div>
                    <div class="control">
                        <label class="checkbox">
                            <input type="checkbox" />
                            チェックボックス
                        </label>
                    </div>
                </div>
            </div>
            <!--画面を3分割(is-4プロパティを使う)する。-->
            <div class="column is-4">
                <div class="field">
                    <div class="radioArea1">
                        <label class="radio">
                            <input type="radio" name="selectradio" />
                            選択A
                        </label>
                    </div>
                    <div class="radioArea1">
                        <label class="radio">
                            <input type="radio" name="selectradio" />
                            選択B
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <!--「送信する」ボタン、「キャンセルする」ボタンを並列表示する。-->
        <div class="columns">
            <div class="column">
                <!--is-groupedプロパティを使ってボタン群をグループ化する-->
                <div class="field is-grouped">
                    <div class="control">
                        <button class="button is-link">送信する</button>
                    </div>
                    <div class="control">
                        <button class="button is-danger">キャンセルする</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

完成図

【参考サイト】

■【公式サイト】Bulma Column sizes
URL:https://bulma.io/documentation/columns/sizes/

■【公式サイト】Bulma Form controls
URL:https://bulma.io/documentation/form/general/

■とんよー。ブログさん　CSS フレームワーク「Bulma」
URL:https://tonyo.design/posts/recommended-bulma-no1/