Columns

The power of Flexbox in a simple interfaces

Auto

Auto

Auto

<template>
    <div class="columns">
        <div class="column">
            <p class="hitam">Auto</p>
        </div>
        <div class="column">
            <p class="hitam">Auto</p>
        </div>
        <div class="column">
            <p class="hitam">Auto</p>
        </div>
    </div>
</template>

12 columns system

As the grid can be divided into 12 columns, there are size classes for each division:
Use class is-1 to is-12

is-1

1

1

1

1

1

1

1

1

1

1

1

is-2

1

1

1

1

1

1

1

1

1

1

is-3

1

1

1

1

1

1

1

1

1

is-4

1

1

1

1

1

1

1

1

is-5

1

1

1

1

1

1

1

is-6

1

1

1

1

1

1

is-7

1

1

1

1

1

is-8

1

1

1

1

is-9

1

1

1

is-10

1

1

is-11

1

is-12

Size custom

is-half

is-full

<template>
    <section>
        <div class="columns is-mobile">
            <div class="column is-half">
                <p class="biru">is-half</p>
            </div>
        </div>
        <div class="columns is-mobile">
            <div class="column is-full">
                <p class="biru">is-full</p>
            </div>
        </div>
    </section>
</template>

Mobile

Auto

Auto

Auto

<template>
    <div class="columns is-mobile">
        <div class="column">
            <p class="hitam">Auto</p>
        </div>
        <div class="column">
            <p class="hitam">Auto</p>
        </div>
        <div class="column">
            <p class="hitam">Auto</p>
        </div>
    </div>
</template>

Responsive

Auto

Auto

Auto

<template>
    <div class="columns">
        <div class="column">
            <p class="hitam">Auto</p>
        </div>
        <div class="column">
            <p class="hitam">Auto</p>
        </div>
        <div class="column">
            <p class="hitam">Auto</p>
        </div>
    </div>
</template>

Gapless

Auto

Auto

Auto

<template>
    <div class="columns">
        <div class="column">
            <p class="hitam">Auto</p>
        </div>
        <div class="column">
            <p class="hitam">Auto</p>
        </div>
        <div class="column">
            <p class="hitam">Auto</p>
        </div>
    </div>
</template>

Narrow

If you want a column to only take the space it needs, use the is-narrow. modifier. The other column(s) will fill up the remaining space.

Kolom Sempit

Kolom ini hanya selebar 200px.

Kolom fleksibel

Kolom ini akan mengambil sisa ruang yang tersedia.

<template>
    <div class="columns is-mobile">
        <div class="column is-narrow">
            <div class="box" style="width: 200px;">
                <p class="title">Kolom Sempit</p>
                <p class="subtitle">Kolom ini hanya selebar 200px.</p>
            </div>
        </div>
        <div class="column">
            <div class="box">
                <p class="title is-5">Kolom fleksibel</p>
                <p class="subtitle">Kolom ini akan mengambil sisa ruang yang tersedia.</p>
            </div>
        </div>
    </div>
</template>

Vertical

Auto

Auto

Auto

<template>
    <div class="columns">
        <div class="column">
            <p class="hitam">Auto</p>
        </div>
        <div class="column">
            <p class="hitam">Auto</p>
        </div>
        <div class="column">
            <p class="hitam">Auto</p>
        </div>
    </div>
</template>

Multiline

is-one-quarter

is-one-quarter

is-one-quarter

is-one-quarter

is-half

is-one-quarter

is-one-quarter

is-one-quarter

Auto

<template>
    <div class="columns is-multiline is-mobile">
        <div class="column is-one-quarter">
            <p class="biru"><code>is-one-quarter</code></p>
        </div>
        <div class="column is-one-quarter">
            <p class="biru"><code>is-one-quarter</code></p>
        </div>
        <div class="column is-one-quarter">
            <p class="biru"><code>is-one-quarter</code></p>
        </div>
        <div class="column is-one-quarter">
            <p class="biru"><code>is-one-quarter</code></p>
        </div>
        <div class="column is-half">
            <p class="biru"><code>is-half</code></p>
        </div>
        <div class="column is-one-quarter">
            <p class="biru"><code>is-one-quarter</code></p>
        </div>
        <div class="column is-one-quarter">
            <p class="biru"><code>is-one-quarter</code></p>
        </div>
        <div class="column is-one-quarter">
            <p class="biru"><code>is-one-quarter</code></p>
        </div>
        <div class="column">
            <p class="biru">Auto</p>
        </div>
    </div>
</template>

Kolom Tengah

is-half
is-offset-one-quarter

is-three-fifths
is-offset-one-fifth

is-4
is-offset-8

is-11
is-offset-1

<template>
    <section>
        <div class="columns is-mobile">
            <div class="column is-half is-offset-one-quarter">
                <p class="biru">
                    <code>is-half</code><br>
                    <code>is-offset-one-quarter</code>
                </p>
            </div>
        </div>

        <div class="columns is-mobile">
            <div class="column is-three-fifths is-offset-one-fifth">
                <p class="biru">
                    <code>is-three-fifths</code><br>
                    <code>is-offset-one-fifth</code>
                </p>
            </div>
        </div>

        <div class="columns is-mobile">
            <div class="column is-4 is-offset-8">
                <p class="biru">
                    <code>is-4</code><br>
                    <code>is-offset-8</code>
                </p>
            </div>
        </div>

        <div class="columns is-mobile">
            <div class="column is-11 is-offset-1">
                <p class="biru">
                    <code>is-11</code><br>
                    <code>is-offset-1</code>
                </p>
            </div>
        </div>
    </section>
</template>